flutter 系列之: 使用 AnimationController 来控制动画效果
简介
之前我们提到了 flutter 提供了比较简单好用的 AnimatedContainer 和 SlideTransition 来进行一些简单的动画效果，但是要完全实现自定义的复杂的动画效果，还是要使用 AnimationController。
今天我们来尝试使用 AnimationController 来实现一个拖拽图片，然后返回原点的动画。
构建一个要动画的 widget
在本文的例子中，我们希望能够让一个图片可以实现拖拽然后自动返回原来位置的效果。
为了实现这个功能，我们首先构建一个放在界面中间的图片。
这里使用了 Align 组件，将一个图片对象放在界面中间。
接下来我们希望这个 widget 可以拖拽，那么把这个 child 放到一个 GestureDetector 中，这样就可以相应拖拽对应的响应。
为了能实现拖动的效果，我们需要在 GestureDetector 的 onPanUpdate 方法中对 Align 的位置进行修改，所以我们需要调用 setState 方法。
在 setState 方法中，我们根据手势的位置来调整 Alignment 的位置，所以这里需要用到 MediaQuery 来获取屏幕的大小。
但是现在实现的效果是图像随手势移动而移动，我们还需要实现在手放开之后，图像自动回复到原来位置的动画效果。
让图像动起来
因为这次需要变动的是 Alignment，所以我们先定义一个包含 Alignment 的 Animation 属性：
接下来我们需要定义一个 AnimationController,用来控制动画信息,并且指定我们需要的动画起点和终点：
我们动画的起点位置就是当前 image 所在的 Alignment,终点就在 Alignment.center。
Alignment 有一个专门表示位置信息的类叫做 AlignmentTween，如上代码所示。
有了起点和终点， 我们还需要指定从起点移动到终点的方式，这里模拟使用弹簧效果，所以使用 SpringSimulation。
SpringSimulation 需要提供对 spring 的描述，起点距离，结束距离和初始速度。
我们使用上面创建的 simulation，来实现动画：
最后我们需要在手势结束的时候来执行这个动画即可：
最后，运行效果如下所示：
总结
AnimationController 是一个很强大的组件，但是使用起来也不是那么的复杂， 我们只需要定义好起点和终点，然后指定动画效果即可。
版权声明: 本文为 InfoQ 作者【程序那些事】的原创文章。
原文链接:【http://xie.infoq.cn/article/29429ee7130c674b4d43c0120】。文章转载请联系作者。
关注公众号：程序那些事，更多精彩等着你！ 2020-06-07 加入
最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧，尽在公众号：程序那些事！
评论