当前位置：首页 > news >正文

flutter 动画

news 来源：原创 2024/9/20 13:29:30

flutter 动画

动画介绍

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