底层自定义动画

3.1 Flutter动画原理

​ Flutter内部通过setState()函数刷新页面，且flutter优化得相当好，一秒执行60/120次也不会有卡顿。

​ Ticker原理：屏幕每刷新一帧，称为一个ticker：

Ticker _ticker = Ticker((elapsed) {
  print("Tick: $elapsed");	//elapsed是运行总时长
})..start();

​ 你可以通过下列方式手动制作一个Ticker（仅作为实验用途，不推荐）：

double _height = 300;
@override
void initState(){
  Ticker _ticker = Ticker((_) => setState((){
    _height --;
    if(_height <= 0) _height = 300;
  }))..start();
  super.initState();
}

​ 上述程序虽然可以运行，但首先，它没有考虑一些特殊情况，如程序暂时退出、切换到其他程序时，动画应该暂停。其次，每一帧时_height--，则在60帧的屏幕下该动画需要5秒执行完毕，而在120hz屏幕下只需要2.5秒。

3.2 Hero动画（主动画）

​ 将需要做Hero动画的控件包裹上Hero，并给它一个tag属性，两个页面对应控件的tag一致。

​ 如果两个页面中的控件样式不一致，或者类型不统一，那么会瞬间切换，不会有控件切换时的动画效果。

3.3 CustomPaint

​ Tips：要使Container占满屏幕，使用

Container(
	constraints: BoxConstraints.expand(),
  //或者
  width: double.infinity,
  height: double.infinity,
)

3.4 嵌入式Rive（Flare）插件动画

Rive New File