共计 1777 个字符，预计需要花费 5 分钟才能阅读完成。
简介
之前咱们提到了 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 是一个很弱小的组件，然而应用起来也不是那么的简单，咱们只须要定义好终点和起点，而后指定动画成果即可。
本文的例子：https://github.com/ddean2009/learn-flutter.git
