一、隐式(全自动)动画
所谓隐式动画就是只需要设置动画目标,过程控制由系统实现
一般是简单点的动画,比如只是简单的宽高变化。当然使用简单不代表功能就简单,下面会有体现
没有循环重播,不用随时中断,没有多方协调,就是从开始运行到结束。
这种动画一般就是隐式动画,使用flutter提供的api,隐式动画一般是Animated...开头。所以,便于学习记忆
还可以自定义隐式动画:TweenAnimationBuilder
AnimatedContainer
动画盒子,是作用到盒子属性上的,所以盒子有的一些属性,是可以动画效果的。。但是每个widget都有自己的管理,所以,如果想实现盒子里widget的动画就需要别的方式了
实现很简单,就两行代码,AnimatedContainer,duration变量。flutter会隐式的帮我们处理动画过程。
实现简单,但是功能可不简单,container有个decoration属性,该属性能实现的功能是很丰富的。所以,只要是盒子这个级别的所有变化都是可以动画的
不同控件间切换的过渡动画:AnimatedSwitcher
依然是个widget,是个盒子,但是该盒子是用于处理内部child组件切换时候动画的。
也是只有一个属性:duration。flutter会隐式帮我们处理动画过程
但是当子组件没有变化的时候,就没有动画了
比如:AnimatedSwitcher内的child组件是个text,text内容有变化的时候,就不会有动画,这是因为flutter判断child子组件没有发生变化,就没有触发动画过程
所以,只需要给组件设置一个key即可。可以如下简单的设置一下:UniqueKey,表示自己唯一的key
key: UniqueKey()
demo
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: 200,
height: 300,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 400),
//当内容有变化的时候就会触发动画
child: Text('content', key: UniqueKey(),),
// 丰富的动画控制
transitionBuilder: (child, animation) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
),
);
其他的一些可以自行尝试
一般就是Animated...开头的动画组件
- AnimatedOpacity
- AnimatedPadding
- ...
另外动画默认是线性变化的,动画有个curve属性,可以自行尝试
curves官方文档
TweenAnimationBuilder
demo
return TweenAnimationBuilder(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(seconds: 2),
builder: (context, double value, widget) {
return Opacity(
opacity: value,
child: Container(
width: 200,
height: 300,
color: Colors.red,
),
);
}
);
补充:平移动画,offset可以直接写到tween里
二、显示(手动控制)动画
一般我们使用AnimationController的时候,直接在as中键入stanim使用模板代码:
class xxx extends StatefulWidget {
const xxx({Key? key}) : super(key: key);
@override
_xxxState createState() => _xxxState();
}
class _xxxState extends State with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container();
}
}
vsync:垂直信号,由于不同设备刷新频率不一样,告诉系统何时同步动画状态。with SingleTickerProviderStateMixin。vsync:this即可
- controller是什么?
动画控制器,是跟系统有绑定的关系,通过vsync:this实现屏幕刷新回调builder回调。所以动画的实现最关心的是_controller持续的变动以及builder回调刷新,具体的动画控制可以自行实现,用Tween修改动画范围
比如我们使用RotationTransition的时候turns参数就可以传_controller,turns的入参就可以用AnimationController做一个映射,自己来控制转的圈数:turns:_controller.drive(Tween(end: 4))
这样实现了_controller的duration内旋转4圈
同理其他...Transition以及AnimatedTransition也一样可以这样用。比如FadeTransition,opacity就可以直接用_controller。
另外可以addListener监听它的值变化,也可以用.value获取动画过程中当前值
- turns传的controller怎么会是个double呢?
上面说的RotatationTransition,turns参数怎么可以用_controller呢?它是继承自extends Animation
-
比如ScaleTransition,scale入参Tween(),可以用_controller.drive(Tween())包装为Animation
类型。作用就是_controller的duration范围内Tween补帧缩放范围. 比如AlignTransition,alignment入参是Animation
类型,也可以用_controller.drive()驱动
return SlideTransition(
position:_controller.drive(Tween(begin: Offset(0, 0), end: Offset(1, 1))),
);
return AlignTransition(
alignment: _controller.drive(Tween(begin: Alignment.topLeft, end: Alignment.bottomRight)),
child: const Text("d"),
);
- ticker是什么?
英文释义是嘀嗒声,形象的表述为屏幕刷新频率,屏幕要刷新一帧的时候就发一个tick
AnimationController初始化的时候设置的duration范围,有几种控制方式:
1、初始化controller时候,设置lowerBound,upperBound
2、scale:_controller.drive(Tween(begin:0.0, end:1.0))。
这种方式解决的是将Tween
3、还有种写法:交错动画
Tween(begin:Offset(0, -0.5), end:Offset(0, 8))
.chain(CurveTween(curve: Curves.elasticInOut))
.chain(CurveTween(curve: Interval(0.0, 0.2)))
.animate(_controller)
chain可以理解为一个函数,就好比g(h(f(x))),函数嵌套,_controller就像是动画的持续过程,这个是跟屏幕刷新有关,但是可以通过多函数复合作用于实际动画效果。比如上面的代码:offset移动和移动速度曲线同时作用于动画过程,就有了从开始到结束沿移动速度曲线进行移动的动画效果
自定义显示动画:AnimatedBuidler
自定义显示动画,一是把动画控制交给AnimationController,二是可以做一些性能优化。比如把动画渲染过程中不需要重绘的组件交给AnimatedBuidler
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
//_controller控制内持续的调用builder
builder: (context, child) {
//每次调用builder,内部所有组件都会重新渲染,注意考虑优化性能
return Opacity(
//这里value超过1也没关系,有自动纠错机制。并不会报错。透明度是0~1,如果超过1就还是1不透明的效果
opacity: _controller.value,
child: Container(
width: 300,
height: 200 + 100 * _controller.value,
color: Colors.red,
child: child,
),
);
},
//动画执行过程中,不需要变化的部分可以传给AnimatedBuilder,
// 每次builder回调时候会再传出来,这样就避免了child部分的重新渲染
child: const Center(
child: Text(
"hello",
style: TextStyle(fontSize: 24),
),
),
);
}
三、其他动画
Flutter动画背后的机制和原理
Hero动画
动画转场更丝滑
但是貌似好像看不出hero动画的牛逼之处,下面再看个例子:
hero动画有个特点,就是触发那一刻就变为目标ui然后开始动画
功能强大,使用简单,只需要在开始和目标ui上包括Hero并设置相同唯一的tag即可
直接操作底层的CustomPaint
嵌入式lottie、Rive/Flare插件动画
体验了一下Rive在线动画平台,跟lottie是差不多的,支持的平台也很全。动画制作交给美工就行了,具体实现,都是加载json。提供的都有插件.
https://rive.app.可以体验一下,制作一个简单的动画,设置时间节点的关键帧,动画也有补帧动画的感觉