目录
- 简介
- 构建一个要动画的widget
- 让图像动起来
- 总结
简介
今天我们来尝试使用AnimationController来实现一个拖拽图片，然后返回原点的动画。
构建一个要动画的widget
为了实现这个功能，我们首先构建一个放在界面中间的图片。
child: Align(
alignment: Alignment.center,
child: Card(
child: Image(image: AssetImage('images/head.jpg'
,
这里使用了Align组件，将一个图片对象放在界面中间。
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方法。
但是现在实现的效果是图像随手势移动而移动，我们还需要实现在手放开之后，图像自动回复到原来位置的动画效果。
让图像动起来
late Animation<Alignment> _animation;
接下来我们需要定义一个AnimationController,用来控制动画信息,并且指定我们需要的动画起点和终点：
late AnimationController _controller;
_animation = _controller.drive(
AlignmentTween(
begin: _animateAlign,
end: Alignment.center,
,
;
我们动画的起点位置就是当前image所在的Alignment,终点就在Alignment.center。
有了起点和终点，我们还需要指定从起点移动到终点的方式，这里模拟使用弹簧效果，所以使用SpringSimulation。
const spring = SpringDescription(
mass: 30,
stiffness: 1,
damping: 1,
;
final simulation = SpringSimulation(spring, 0, 1, -1;
我们使用上面创建的simulation，来实现动画：
_controller.animateWith(simulation;
最后我们需要在手势结束的时候来执行这个动画即可：
onPanEnd: (details {
_runAnimation(;
},
最后，运行效果如下所示：
总结
本文的例子：https://github.com/ddean2009/learn-flutter.git