Flutter动画实现粒子漂浮效果

本文所有源码见https://github.com/MoonRiser/FlutterLearning

要问2019年最火的移动端框架，肯定非Google的Flutter莫属。

本着学习的态度，基本的Dart语法（个人感觉语法风格接近Java+JS）过完之后，开始撸代码练手。

---

效果图

（这里为了方便录制gif，动画设置的较快；如果将动画的Duration设置成20s，看起来就是浮动的效果了）
粒子碰撞的效果参考了张风捷特列 大佬的Flutter动画之粒子精讲

1. Flutter的动画原理

在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画，这和电影的原理是一样的。我们将UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数。

简而言之，就是逐帧绘制，只要屏幕刷新的足够快，我们就会觉得这是个连续的动画。
设想一个小球从屏幕顶端移动到底端的动画，为了完成这个动画，我们需要哪些数据呢？

• 小球的运动轨迹，即起始点s、终点e和中间任意一点p
• 动画持续时长t

只有这两个参数够吗？明显是不够的，因为小球按照给定的轨迹运动，可能是匀速、先快后慢、先慢后快、甚至是一会儿快一会慢的交替地运动，只要在时间t内完成，都是可能的。所以我们应该再指定一个参数c来控制动画的速度。

1.1 vsync探究

废话不多说，我们看看Flutter中是动画部分的代码：

AnimationController controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addListener(() {
        //_renderBezier();
        print(