有時(shí)候一個(gè)完整的動畫可能是由不同的動畫疊加起來奸焙,如一個(gè)動畫執(zhí)行完成在執(zhí)行另一個(gè)動畫哟冬,這時(shí)候我們需要多個(gè)動畫對象(Animation)各墨,但是我們不需要多個(gè)動畫控制器(AnimationController)伴箩,只需要給每一動畫對象設(shè)置時(shí)間間隔(Interval)赠潦。
有動畫都由同一個(gè)AnimationController (opens new window)驅(qū)動,無論動畫需要持續(xù)多長時(shí)間招驴,控制器的值必須在0.0到1.0之間篙程,而每個(gè)動畫的間隔(Interval)也必須介于0.0和1.0之間。對于在間隔中設(shè)置動畫的每個(gè)屬性别厘,需要分別創(chuàng)建一個(gè)Tween (opens new window)用于指定該屬性的開始值和結(jié)束值虱饿。也就是說0.0到1.0代表整個(gè)動畫過程,我們可以給不同動畫指定不同的起始點(diǎn)和終止點(diǎn)來決定它們的開始時(shí)間和終止時(shí)間触趴。
示例
圓形先縮小然后改變透明度
AnimationController animationController;
Animation<double> animationSize;
Animation<double> animationOpacity;
animationController =
AnimationController(duration: Duration(seconds: 2), vsync: this);
animationSize = Tween<double>(begin: 80, end: 60).animate(
CurvedAnimation(
parent: animationController,
curve: Interval(
0.0, 0.6, //間隔氮发,前60%的動畫時(shí)間
curve: Curves.ease,
),
),
);
animationOpacity = Tween(begin: 1.0, end: 0.5).animate(CurvedAnimation(
parent: animationController,
curve: Interval(0.6, 1, curve: Curves.easeIn)));
animationController.forward();
Container(
width: MAX_SIZE + 50,
height: MAX_SIZE + 50,
color: Colors.blue,
//不加這一句子container 會變得和父container 大小一樣
alignment: Alignment.center,
child: Opacity(
opacity: animationOpacity.value,
child: Container(
width: animationSize.value,
height: animationSize.value,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(MAX_SIZE / 2),
),
child: Icon(
Icons.mic,
color: Colors.white,
),
// transform:
// Matrix4.rotationY(animationTransform.evaluate(animation)),
),
),
),
注意setstate方法更新視圖