20.3.27
Flutter实现动画
Flutter有自己的渲染闭环
一. 动画API认识
1. Animation
抽象类
监听动画值的改变
监听动画状态的改变
value
status
addListener
removeListener
addStatusListener
2. AnimationController
继承自Animation
构造器里面的必传参数 vsync
同步信号, 屏幕刷新率, 下层渲染
AnimationController(vsync: this);
多继承, 混入 with SingleTickerProviderStateMixin
屏幕绘制, 退到后台、锁屏状态不需要绘制, 不收到同步信号不绘制
forward(): 向前执行动画
reverse(): 反转执行动画
1.3 CurvedAnimation
作用: 设置动画执行的速率(速度曲线)
官网有gif图示例
默认情况下, AnimationController动画生成的值所在区间是0.0到1.0
1.4 Tween: 设置动画执行的value范围
begin: 开始值
end: 结束值
文档注释对应类, 有警告
二. 动画案例练习
2.1 动画的基本使用
心跳动画, 可以反复执行
心的size变化
- 创建AnimationController, 做动画的基石
this写在方法里才有用
每次值发生变化, 界面要执行刷新
设置Curve的值
CurvedAnimation(parentL_controller, curve: Curves.elasticInOut)Tween
Tween(begin: 50.0, end: 150).animation(animation);
50要写成 50.0, 泛型 成了int类型, 出问题
监听动画值的改变
_controller.addListener
不需要重新构建的后期做优化
监听动画的状态改变
addStatusListener((status) {})
点击按钮动画暂停, 再次点击开始
优化改变方向
StatelessWidget做动画?
不可以做动画
最后记得要
dispose() {
}
销毁, 调用的目的不是让controller对象销毁, 回收操作
2.2 AnimatedWidget
动画的另一个知识点
之前做的存在两个问题
- 每次写动画, 都需要写一段代码
- setState => Build方法, 所有东西都会重新构建
只是icon做了个动画
优化方案: - AnimatedWidget
- 将需要执行动画的Widget放到一个车AnimatedWidget中的build方法里进行返回
JHAnimatedWidget
父类中的属性 listenable
缺点:
- 每次都需要创建一个类
- 如果构建的Widget有子类, 那么子类依然会重复的build
- 将需要执行动画的Widget放到一个车AnimatedWidget中的build方法里进行返回
- AnimateBuilder
不重新构建
3.1 交织动画
集合了透明度变化、大小变化、颜色变化、旋转动画等
我们这里是通过多个Tween
文档Cookbook -> Animation ->
- 大小变化动画
- 颜色变化动画
- 透明度变化动画
transform: Matrix4.rotationZ(pi/4);
默认左上角作为坐标原点旋转, 希望以中心点旋转
并不是特别好做
alignment: Alignment.center
创建AnimationController
设置Curve的值
Tween
3.1 创建size的tween
3.2 创建color的ColorTween
3.3 创建opacity的tween
3.4 创建radians的tween
build方法疯狂执行
-> AnimatedBuilder
有一些动画是不支持设置Curve的属性的, 设置会报错
curve: Curves.elasticInOut
知识补充:
转场动画
iOS中的Push
->Present 两种做法 Modal
- 自己自定义动画
- 比较简单的方式, Material
fullscreenDialog: true;
渐变的方式弹出页面
-> Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (ctx, animation1, animation2) {
//return JHModalPage(); 一下弹出
return FadeTransition(
opacity: animation1,
child:
);
}
))
3.2 Hero动画
会飞的动画
遇到的需求:
点击商品列表的一张图片, 跳到另一个页面大图展示
iOS中自定义转场动画
Flutter里面直接用Hero动画直接就可以做出来
这种跨页面共享的动画被称之为享元动画（Shared Element Transition）
在Flutter中，有一个专门的Widget可以来实现这种动画效果：Hero
图片网站:
https://picsum.photos/500/500?random=
普通的push效果 -> 动画效果
非常简单
绑定Hero
tag不能重复
改push效果 -> 渐变效果
-> PageRouteBuilder
Flutter中文网站
官方文档错误