快捷導(dǎo)航

Android Flutter制作交錯(cuò)動(dòng)畫的示例代碼

更新時(shí)間：2022年06月28日 08:54:42 作者：島上碼農(nóng)

這篇文章我們將用Flutter實(shí)現(xiàn)一個(gè)交錯(cuò)動(dòng)畫的應(yīng)用實(shí)例，我們讓輪子在草地滾動(dòng)著前進(jìn)，而且還能粘上“綠色的草”，感興趣的可以動(dòng)手嘗試一下

前言

之前一篇我們講了 Flutter組合動(dòng)畫實(shí)現(xiàn)的方式 —— 交錯(cuò)動(dòng)畫。借助 GIF 和繪圖技巧是可以做到類似 GIF 那種效果的。本篇我們來一個(gè)應(yīng)用實(shí)例，我們讓輪子在草地滾動(dòng)著前進(jìn)，而且還能粘上“綠色的草”，運(yùn)行效果如下動(dòng)畫所示。

動(dòng)畫解析

上面實(shí)現(xiàn)的效果實(shí)際上由三個(gè)動(dòng)畫組成：

輪子前進(jìn)的動(dòng)畫
輪子滾動(dòng)
輪子的邊緣顏色漸變（由黑色變成綠色）

這三個(gè)動(dòng)畫是同時(shí)進(jìn)行的，因此需要使用到交錯(cuò)動(dòng)畫，即使用一個(gè) AnimationController來控制三個(gè) Tween 對(duì)象實(shí)現(xiàn)上述的動(dòng)畫組合。

編碼實(shí)現(xiàn)

首先是輪子組件的定義，為了讓輪子轉(zhuǎn)動(dòng)的效果能夠看到，我們給輪子填充了線性的漸變色，然后輪子的尺寸、旋轉(zhuǎn)速度（time）和邊框顏色由上級(jí)組件來控制。整個(gè)實(shí)現(xiàn)很簡(jiǎn)單，就是一個(gè)加了裝飾的 Container 而已。

class?Wheel?extends?StatelessWidget?{
??final?double?size;
??final?Color?color;
??final?double?time;
??const?Wheel({
????Key??key,
????required?this.size,
????required?this.time,
????required?this.color,
??})?:?super(key:?key);

??@override
??Widget?build(BuildContext?context)?{
????return?Container(
??????width:?size,
??????height:?size,
??????transform:?Matrix4.identity()..rotateZ(2?*?pi?*?time),
??????transformAlignment:?Alignment.center,
??????decoration:?BoxDecoration(
????????border:?Border.all(color:?color,?width:?10.0),
????????borderRadius:?BorderRadius.circular(size?/?2),
????????gradient:?LinearGradient(
??????????colors:?[
????????????Colors.white,
????????????Colors.orange[100]!,
????????????Colors.orange[400]!,
??????????],
????????),
??????),
????);
??}
}

然后是整個(gè)頁面布局，整個(gè)頁面布局其實(shí)就是一個(gè) Stack，然后底部是綠色的 Container再加兩個(gè)輪子，都是使用 Positioned 來確定各自的位置。然后就是通過受控的Tween 對(duì)象控制輪子的旋轉(zhuǎn)速度，輪子外邊沿顏色和移動(dòng)的距離，代碼如下，其中輪子移動(dòng)距離通過控制邊距實(shí)現(xiàn)。

Widget?build(BuildContext?context)?{
??final?bottomHeight?=?MediaQuery.of(context).size.height?/?3;
??return?Scaffold(
????appBar:?AppBar(
??????title:?const?Text('交錯(cuò)動(dòng)畫'),
????),
????body:?Stack(children:?[
??????Positioned(
????????child:?Container(
??????????width:?double.infinity,
??????????height:?bottomHeight,
??????????color:?Colors.green[400],
????????),
????????bottom:?0,
????????left:?0,
????????right:?0,
??????),
??????Positioned(
??????????child:?Wheel(
????????????size:?wheelSize,
????????????color:?_color.value!,
????????????time:?_time.value,
??????????),
??????????left:?_offset.value?*?MediaQuery.of(context).size.width,
??????????bottom:?bottomHeight),
??????Positioned(
??????????child:?Wheel(
????????????size:?wheelSize,
????????????color:?_color.value!,
????????????time:?-_time.value,
??????????),
??????????right:?_offset.value?*?MediaQuery.of(context).size.width,
??????????bottom:?bottomHeight)
????]),
????floatingActionButton:?FloatingActionButton(
??????child:?Icon(Icons.play_arrow),
??????onPressed:?()?{
????????if?(_controller.isCompleted)?{
??????????_controller.reverse();
????????}?else?if?(!_controller.isAnimating)?{
??????????_controller.forward();
????????}
??????},
????),
??);
}

最后就是構(gòu)建受AnimationController 控制的 Tween 對(duì)象了，這個(gè)在Flutter 做出 GIF 動(dòng)畫效果已經(jīng)介紹過了，代碼如下：

late?AnimationController?_controller;
late?Animation<double>?_time;
late?Animation<double>?_offset;
late?Animation<Color?>?_color;

final?wheelSize?=?80.0;

@override
void?initState()?{
??_controller?=
??????AnimationController(duration:?Duration(seconds:?4),?vsync:?this)
????????..addListener(()?{
??????????setState(()?{});
????????});

??_time?=?Tween<double>(begin:?0,?end:?8.0).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????1.0,
????????curve:?Curves.linear,
??????),
????),
??);
??_offset?=?Tween<double>(begin:?0,?end:?1.0).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????1.0,
????????curve:?Curves.easeInCubic,
??????),
????),
??);
??_color?=?ColorTween(begin:?Colors.black87,?end:?Colors.green).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????0.8,
????????curve:?Curves.easeIn,
??????),
????),
??);
??super.initState();
}

就這樣，一對(duì)奔向?qū)Ψ降妮喿觿?dòng)畫效果就完成了！