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的资料请关注脚本之家其它相关文章！
相关文章
使用 sqflite 相对来说还是有点复杂，比如遇到数据不兼容的时候需要手动转换，增加了不少繁琐的代码。本篇我们就来介绍一个 ORM 框架，来简化数据库的管理，感兴趣的可以了解一下2023-04-04
这篇文章主要介绍了Android编程之监听器用法,结合实例形式较为详细的分析了Android监听器的功能及针对短信的监听与响应操作技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了基于Android App 安全登录认证解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Android客户端post请求服务器端实例,本文讲解了Android客户端与服务器端通信方式、解析服务器端返回数据的解释、用GET和POST访问http资源等内容,并给出了一个POST实例,需要的朋友可以参考下2015-06-06
网传微信支付页面的第三方链接一个格子需要广告费1一个亿，微信支付页非常适合做功能导航，本篇使用 ListView和 GridView 模仿了微信支付的页面，同时介绍了如何装饰一个组件的背景和边缘样式。2021-05-05
这篇文章主要介绍了从源码角度分析Android的消息机制，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了RecyclerView实现列表倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家详细介绍了Android实现简单实用的垂直进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Android编程自定义title bar(标题栏)的方法,结合实例形式分析了Android针对标题栏的设置与页面布局操作相关技巧,需要的朋友可以参考下2016-10-10
android app新增了透明栏效果，结果发现键盘弹起后会遮盖屏幕底部的EditText，没有像想象中的调整窗口大小，并滚动ScrollView，将EditText显示在键盘上方。下面小编把解决方法记录一下，特此分享到脚本之家平台，感兴趣的朋友一起看看吧2016-10-10
最新评论