Flutter使用AnimationController实现控制动画
简介
之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果，但是要完全实现自定义的复杂的动画效果，还是要使用AnimationController。
今天我们来尝试使用AnimationController来实现一个拖拽图片，然后返回原点的动画。
构建一个要动画的widget
在本文的例子中，我们希望能够让一个图片可以实现拖拽然后自动返回原来位置的效果。
为了实现这个功能，我们首先构建一个放在界面中间的图片。
child: Align(
alignment: Alignment.center,
child: Card(
child: Image(image: AssetImage('images/head.jpg'))
),
)这里使用了Align组件，将一个图片对象放在界面中间。
接下来我们希望这个widget可以拖拽，那么把这个child放到一个GestureDetector中，这样就可以相应拖拽对应的响应。
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return GestureDetector(
onPanUpdate: (details) {
setState(() {
_animateAlign += Alignment(
details.delta.dx / (size.width / 2),
details.delta.dy / (size.height / 2),
);
});
},
child: Align(
alignment: _animateAlign,
child: Card(
child: widget.child,
),
),
);
}为了能实现拖动的效果，我们需要在GestureDetector的onPanUpdate方法中对Align的位置进行修改，所以我们需要调用setState方法。
在setState方法中，我们根据手势的位置来调整Alignment的位置，所以这里需要用到MediaQuery来获取屏幕的大小。
但是现在实现的效果是图像随手势移动而移动，我们还需要实现在手放开之后，图像自动回复到原来位置的动画效果。
让图像动起来
因为这次需要变动的是Alignment，所以我们先定义一个包含Alignment的Animation属性：
late Animation<Alignment> _animation;
接下来我们需要定义一个AnimationController,用来控制动画信息,并且指定我们需要的动画起点和终点：
late AnimationController _controller;
_animation = _controller.drive(
AlignmentTween(
begin: _animateAlign,
end: Alignment.center,
),
);我们动画的起点位置就是当前image所在的Alignment,终点就在Alignment.center。
Alignment有一个专门表示位置信息的类叫做AlignmentTween，如上代码所示。
有了起点和终点， 我们还需要指定从起点移动到终点的方式，这里模拟使用弹簧效果，所以使用SpringSimulation。
SpringSimulation需要提供对spring的描述，起点距离，结束距离和初始速度。
const spring = SpringDescription(
mass: 30,
stiffness: 1,
damping: 1,
);
final simulation = SpringSimulation(spring, 0, 1, -1);我们使用上面创建的simulation，来实现动画：
_controller.animateWith(simulation);
最后我们需要在手势结束的时候来执行这个动画即可：
onPanEnd: (details) {
_runAnimation();
},最后，运行效果如下所示：
总结
AnimationController是一个很强大的组件，但是使用起来也不是那么的复杂， 我们只需要定义好起点和终点，然后指定动画效果即可。
本文的例子：github.com/ddean2009/learn-flutter
以上就是Flutter使用AnimationController实现控制动画的详细内容，更多关于Flutter AnimationController的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Android 高德地图POI定位地址搜索功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
在Android开发时会遇到如下一种场合希望应用下载到当前应用的根目录下，而非SD卡中然后可以随时被该应用或其他应用访问这个文件，即具有被全局读取的权限2012-11-11
这篇文章主要介绍了RxJava操作符，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍Android自定义Dialog,在Android开发中,出于美观系统自带的Dialog一般都会被重新,这里给大家写个小实例,大家可以参考下2016-07-07
这篇文章主要介绍了Android AndFix热修复原理详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值吗，需要的小伙伴可以参考一下2022-08-08
android scrollview顶部渐渐消失实现实例详解
这篇文章主要为大家介绍了android scrollview顶部渐渐消失实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
Kotlin协程开发之Flow的融合与Channel容量及溢出策略介绍
这篇文章主要介绍了Kotlin协程：Flow的融合、Channel容量、溢出策略，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
这篇文章主要为大家详细介绍了Android实现网易新闻客户端首页效果的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了MTK在Android平台开发的流程，一共分析了44个步骤，需要的朋友学习下吧。2017-12-12
这篇文章主要介绍了Flutter利用注解生成可自定义的路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论