Flutter动画实现粒子漂浮效果

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

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

---

效果图

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(controllerG.value);
        print('这是第${++count}次回调');
      });

简要分析一下，AnimationController，顾名思义，控制器，用来控制动画的播放。传入的参数中，duration我们知道是前面提到过的动画持续时长t，那这个vsync是啥参数呢？打过游戏的同学可能对这个单词有印象，vsync 就是 垂直同步 。那什么是垂直同步呢？

垂直同步又称场同步（Vertical Hold），从CRT显示器的显示原理来看，单个像素组成了水平扫描