👈🏻👈🏻👈🏻你来追我呀！Flutter 实现追逐动画

2022 年 7 月 19 日
本文字数：2152 字
阅读完需：约 7 分钟

前言

我们使用 Stack 组件的时候，通常会使用 Positioned 组件来做子组件相对 Stack 的定位，Positioned 通过 top，bottom，height 三选二确定垂直方向的位置和尺寸，使用 left，right 和 width 三选二确定水平方向的位置和尺寸。对应的，我们可以使用 AnimatedPositioned 组件来实现子组件在 Stack 中的移动、尺寸变化等其他效果。实际上，我们在Flutter 模拟火箭发射动画已经介绍过 AnimatedPositioned 组件了，本篇我们用这个组件构建两个球追逐的动画效果，以便全面了解这个组件的使用。

效果解析

从动图可以看到，蓝色球和橙色球会一先一后沿着白色大圆的左、下、右、上顶点移动，同时在启动切换的时候会有弹入效果。具体实现的逻辑如下：

沿着大圆 4 个点移动效果，我们可以控制球的起始位置就可以搞定了。
弹入效果则可以使用 bounceIn 曲线实现。
对一先一后的追逐效果，可以设置一个有序的位置数组，一个球的位置是另一个球的下一个位置，可以通过使用不同的下标从位置数组取取位置实现。
重复动效的实现：重复动效使用 AnimatedPositioned 的 onEnd 触发，每次结束时调用 setState将控制位置的下标加 1，就可以实现动画循环的效果了。

代码实现

代码实现如下：

class _AnimatedPositionedDemoState extends State<AnimatedPositionedDemo> {  final roundSize = 200.0;  var ballSize = 50.0;  late List<Offset> animatedOffsets;  int index = 0;  @override  void initState() {    animatedOffsets = [      Offset(0.0, (roundSize - ballSize) / 2),      Offset((roundSize - ballSize) / 2, roundSize - ballSize),      Offset(roundSize - ballSize, (roundSize - ballSize) / 2),      Offset((roundSize - ballSize) / 2, 0.0),    ];    super.initState();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('AnimatedPositioned'),        brightness: Brightness.dark,        backgroundColor: Colors.black,      ),      backgroundColor: Colors.black,      body: Center(        child: Stack(children: [          ClipOval(            child: Container(              width: roundSize,              height: roundSize,              color: Colors.white,            ),          ),          AnimatedPositioned(            top: animatedOffsets[index].dy,            height: ballSize,            left: animatedOffsets[index].dx,            width: ballSize,            child: ClipOval(              child: Container(                color: Colors.blue,              ),            ),            duration: Duration(seconds: 2),            curve: Curves.bounceIn,            onEnd: () {              setState(() {                index = (index + 1) % animatedOffsets.length;              });            },          ),          AnimatedPositioned(            top: animatedOffsets[(index + 1) % animatedOffsets.length].dy,            height: ballSize,            left: animatedOffsets[(index + 1) % animatedOffsets.length].dx,            width: ballSize,            child: ClipOval(              child: Container(                color: Colors.orange,              ),            ),            duration: Duration(seconds: 2),            curve: Curves.bounceIn,          ),        ]),      ),      floatingActionButton: FloatingActionButton(        child: Text(          '走你',          style: TextStyle(            color: Colors.white,          ),          textAlign: TextAlign.center,        ),        onPressed: () {          setState(() {            index = (index + 1) % 4;          });        },      ),    );  }}

复制代码

其中关键部分是：

AnimatedPositioned(  top: animatedOffsets[index].dy,  height: ballSize,  left: animatedOffsets[index].dx,  width: ballSize,  child: ClipOval(    child: Container(      color: Colors.blue,    ),  ),  duration: Duration(seconds: 2),  curve: Curves.bounceIn,  onEnd: () {    setState(() {      index = (index + 1) % animatedOffsets.length;    });  },),