Staggered Animations
Staggered Animations就是交错动画,也可以称之为组合动画。在实际的动画使用过程中,动画可能并不是由一个单一方式呈现的。渐变,位移,缩放等都是基础的动画,而我们有时候需要把这些基础的动画组合起来,使其成为一个组合动画,即交错动画。(下图为本文最终实现效果)
在Android开发中,是通过AnimationController来实现这种交错动画的。在Flutter开发中,也沿用了名为AnimationController的类来实现。
组合动画的代码实现
对于如何在Flutter开发中,写交错动画,我们可以通过AnimationController把动画组合在一起,然后分别设置其动画的参数即可。
对于AnimationController来说,控制器的值Tween必须属于(0.0,1.0)。也就是说,组合动画的所有间隔必须在0到1的数字之间进行,有了这个思路,我们来实践实现其交错动画(组合动画),代码如下:
import 'package:flutter/scheduler.dart' show timeDilation;
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{
AnimationController controller;
@override
void initState() {
// TODO: implement initState
super.initState();
controller=AnimationController(duration: const Duration(milliseconds: 2000),vsync: this);//初始化,动画控制器,每个动画都是执行2秒
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
controller.dispose();//销毁释放
}
Future<void> _playAnimation() async{
try{
await controller.forward().orCancel;//开始
await controller.reverse().orCancel;//反向
}on TickerCanceled{
}
}
@override
Widget build(BuildContext context) {
timeDilation=10.0;
return Scaffold(
appBar: AppBar(
title: Text("组合动画"),
),
body: GestureDetector(
behavior: HitTestBehavior.opaque,//自己处理事件
onTap: (){
_playAnimation();
},
child: Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.1),
border: Border.all(
color: Colors.black.withOpacity(0.5),
),
),
child: StaggedAnimation(controller: controller.view,),
),
),
),
);
}
}
class StaggedAnimation extends StatelessWidget{
//Curves.ease一种三次动画曲线,速度快,结束慢
final Animation<double> controller;
final Animation<double> bezier;//透明度渐变
final Animation<double> width;//宽度变化
final Animation<double> height;//高度变化
final Animation<EdgeInsets> drift;//位移变化
final Animation<BorderRadius> borderRadius;//圆角变化
final Animation<Color> color;//颜色变化
StaggedAnimation({Key key,this.controller}):
bezier=Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.1,curve: Curves.ease),
)
),
width=Tween<double>(
begin: 50.0,
end: 150.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.125,0.250,curve: Curves.ease),
)
),
height=Tween<double>(
begin: 50.0,
end: 150.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.250,0.375,curve: Curves.ease),
),
),
drift=EdgeInsetsTween(
begin: const EdgeInsets.only(bottom: 16.0),
end: const EdgeInsets.only(bottom: 75.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.375,0.5,curve: Curves.ease),
),
),
borderRadius=BorderRadiusTween(
begin: BorderRadius.circular(4.0),
end: BorderRadius.circular(75.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.5,0.75,curve: Curves.ease),
),
),
color=ColorTween(
begin: Colors.indigo[100],
end: Colors.orange[400],
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.75,1.0,curve: Curves.ease),
),
),
super(key:key);
Widget _buildAnimation(BuildContext context,Widget child){
return Container(
padding: drift.value,
alignment: Alignment.bottomCenter,
child: Opacity(//透明组件
opacity: bezier.value,
child: Container(
width: width.value,
height: height.value,
decoration: BoxDecoration(
color: color.value,
border: Border.all(
color: Colors.indigo[300],
width: 3.0
),
borderRadius: borderRadius.value,
),
),
),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: _buildAnimation,
animation: controller,
);
}
}
上面代码使用的是AnimatedBuilder,这样可以不用去显式的去添加addlistener,节省很多代码,不懂的可以回顾前面的内容,其他的代码不用多说,还有,dart异步在第三篇dart语言中有讲到,这里就不过多的赘述了,这段组合动画实现的效果如首图所示。