Flutter从入门到写出完整App Day12

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变化

1. 创建AnimationController, 做动画的基石
   this写在方法里才有用

每次值发生变化, 界面要执行刷新

2. 设置Curve的值
   CurvedAnimation(parentL_controller, curve: Curves.elasticInOut)

3. Tween
   Tween(begin: 50.0, end: 150).animation(animation);
   50要写成 50.0, 泛型 成了int类型, 出问题

监听动画值的改变
_controller.addListener
不需要重新构建的后期做优化

监听动画的状态改变
addStatusListener((status) {})

点击按钮动画暂停, 再次点击开始
优化改变方向

StatelessWidget做动画?
不可以做动画

最后记得要
dispose() {
}
销毁, 调用的目的不是让controller对象销毁, 回收操作

2.2 AnimatedWidget

动画的另一个知识点
之前做的存在两个问题

1. 每次写动画, 都需要写一段代码
2. setState => Build方法, 所有东西都会重新构建
   只是icon做了个动画
   优化方案:
3. AnimatedWidget
   • 将需要执行动画的Widget放到一个车AnimatedWidget中的build方法里进行返回
     JHAnimatedWidget
     父类中的属性 listenable
     缺点:
   1. 每次都需要创建一个类
   2. 如果构建的Widget有子类, 那么子类依然会重复的build
4. AnimateBuilder
   不重新构建

3.1 交织动画

集合了透明度变化、大小变化、颜色变化、旋转动画等
我们这里是通过多个Tween

文档Cookbook -> Animation ->

1. 大小变化动画
2. 颜色变化动画
3. 透明度变化动画

transform: Matrix4.rotationZ(pi/4);
默认左上角作为坐标原点旋转, 希望以中心点旋转
并不是特别好做
alignment: Alignment.center

1. 创建AnimationController

2. 设置Curve的值

3. 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

1. 自己自定义动画
2. 比较简单的方式, 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中文网站
官方文档错误