flutter 动画

flutter 动画

动画介绍

• 帧率 FPS（Frame Per Second），即每秒的动画帧数。帧率越高则动画就会越流畅！
• 动画抽象类
  • Animation
    • value：获取动画的当前状态值
    • addListener()：用于给 Animation 添加帧监听器
    • addStatusListener()：给 Animation 添加“动画状态改变”监听器
  • Curve：动画曲线
    • linear：匀速的
    • decelerate：匀减速
    • ease：开始加速，后面减速
    • easeIn：开始慢，后面快
    • easeOut：开始快，后面慢
    • easeInOut：开始慢，然后加速，最后再减速
    • 自定义正弦曲线

      class ShakeCurve extends Curve {
               
      	@override
      	double transform(double t) {
               
      		return math.sin(t * math.PI * 2);
      	}
      }
      

  • AnimationController：动画控制器
    • forward()：启动正向动画
    • stop()：停止
    • reverse()：启动反向动画
    • duration：动画时长
  • Tween：定义从输入范围到输出范围的映射
    • begin
    • end
    • animate()

动画状态监听

• addStatusListener()：添加动画状态改变监听器
• AnimationStatus：动画状态
  • dismissed：动画在起始点停止
  • forward：动画正在正向执行
  • reverse：动画正在反向执行
  • completed：动画在终点停止

自定义路由切换动画

• 使用 PageRouteBuilder

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500), //动画时间为500毫秒
    pageBuilder: (BuildContext context, Animation animation,
        Animation secondaryAnimation) {
   
      return FadeTransition(
        //使用渐隐渐入过渡,
        opacity: animation,
        child: PageB(), //路由B
      );
    },
  ),
);

• 继承 PageRoute 类
• Hero 动画

交织动画

• 原理
  • 1.要创建交织动画，需要使用多个动画对象（Animation）
  • 2.一个 AnimationController 控制所有的动画对象，控制器的值必须在 0.0 到 1.0 之间
  • 3.给每一个动画对象指定时间间隔（Interval），给不同动画创建一个 Tween 用于指定不同属性的开始值和结束值
• 示例
  • 实现一个柱状图增长的动画：
    1、开始时高度从 0 增长到 300 像素，同时颜色由绿色渐变为红色；这个过程占据整个动画时间的 60%。
    2、高度增长到 300 后，开始沿 X 轴向右平移 100 像素；这个过程占用整个动画时间的 40%。

// 定义动画widget：
class StaggerAnimation extends StatelessWidget {
   
  StaggerAnimation({
   
    Key? key,
    required this.controller,
  }) : super(key: key) {
   
    //高度动画
    height = Tween<double>(
      begin: .0,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves