快捷導(dǎo)航

Android Flutter實(shí)現(xiàn)3D動(dòng)畫(huà)效果示例詳解

更新時(shí)間：2022年03月23日 17:04:30 作者：島上碼農(nóng)

在Flutter中提供了AnimatedWidget組件用于構(gòu)建可復(fù)用的動(dòng)畫(huà)組件。本文我們用AnimatedWidget來(lái)實(shí)現(xiàn)組件的3D旋轉(zhuǎn)效果，感興趣的可以了解一下

前言

上一篇我們介紹了 Animation 和 AnimationController 的使用，這是最基本的動(dòng)畫(huà)構(gòu)建類(lèi)。但是，如果我們想構(gòu)建一個(gè)可復(fù)用的動(dòng)畫(huà)組件，通過(guò)外部參數(shù)來(lái)控制其動(dòng)畫(huà)效果的時(shí)候，上一篇的方法就不太合適了。在 Flutter 中提供了 AnimatedWidget 組件用于構(gòu)建可復(fù)用的動(dòng)畫(huà)組件。本篇我們用 AnimatedWidget 來(lái)實(shí)現(xiàn)組件的3D 旋轉(zhuǎn)效果，如下圖所示。

AnimatedWidget 簡(jiǎn)介

AnimatedWidget是一個(gè)抽象的 StatefulWidget，構(gòu)造方法如下所示。

const?AnimatedWidget({
????Key??key,
????required?this.listenable,
??})?:?assert(listenable?!=?null),
???????super(key:?key);

主要在于接收一個(gè) listenable 參數(shù)，通常會(huì)是 Animation 對(duì)象。在 AnimatedWidget 內(nèi)部的_AnimatedState 類(lèi)中，會(huì)添加該對(duì)象變化監(jiān)聽(tīng)回調(diào)，進(jìn)而刷新界面。

class?_AnimatedState?extends?State<AnimatedWidget>?{
??@override
??void?initState()?{
????super.initState();
????widget.listenable.addListener(_handleChange);
??}

??@override
??void?didUpdateWidget(AnimatedWidget?oldWidget)?{
????super.didUpdateWidget(oldWidget);
????if?(widget.listenable?!=?oldWidget.listenable)?{
??????oldWidget.listenable.removeListener(_handleChange);
??????widget.listenable.addListener(_handleChange);
????}
??}

??@override
??void?dispose()?{
????widget.listenable.removeListener(_handleChange);
????super.dispose();
??}

??void?_handleChange()?{
????setState(()?{
??????//?The?listenable's?state?is?our?build?state,?and?it?changed?already.
????});
??}
??
??//?...
}

可以看到，只需要將 Animation 對(duì)象傳給 AnimatedWidget 對(duì)象后，就不需要我們之前那樣自己寫(xiě) addListener 之類(lèi)的處理了。而整個(gè)動(dòng)畫(huà)可以交給外部其他對(duì)象來(lái)控制，從而實(shí)現(xiàn)動(dòng)畫(huà)組件的復(fù)用。

3D 旋轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)

3D 旋轉(zhuǎn)的實(shí)現(xiàn)比較簡(jiǎn)單，在 Container 組件有兩個(gè)參數(shù)控制轉(zhuǎn)換（transform），分別是：

transform：Matrix4對(duì)象，可以實(shí)現(xiàn)圍繞 X、Y、Z軸的旋轉(zhuǎn)、平移，以及變形等效果。關(guān)于 Matrix4涉及到很多矩陣運(yùn)算和線性代數(shù)的知識(shí)，可以參考 Matrix4的源碼自行溫習(xí)一下大學(xué)的數(shù)學(xué)知識(shí)。
transformAlignment：轉(zhuǎn)換的對(duì)齊方式，可以理解為起點(diǎn)位置，可以使用 Alignment 對(duì)象來(lái)設(shè)置。

有了這個(gè)基礎(chǔ)，我們就可以定義3D 旋轉(zhuǎn)動(dòng)效了，我們定義一個(gè)通用的組件，ThreeDAnimatedWidget：

class?ThreeDAnimatedWidget?extends?AnimatedWidget?{
??final?Widget?child;
??const?ThreeDAnimatedWidget(
??????{Key??key,?required?Animation<double>?animation,?required?this.child})
??????:?super(key:?key,?listenable:?animation);

??@override
??Widget?build(BuildContext?context)?{
????final?animation?=?listenable?as?Animation<double>;

????return?Center(
??????child:?Container(
????????transform:?Matrix4.identity()
??????????..rotateY(2?*?pi?*?animation.value)
??????????..setEntry(1,?0,?0.01),
????????transformAlignment:?Alignment.center,
????????child:?child,
??????),
????);
??}
}

這里我們?cè)O(shè)置的是圍繞中心點(diǎn)繞 Y 軸旋轉(zhuǎn)，并使用 setEntry 設(shè)置了一定的傾斜角（這會(huì)更有立體感）。實(shí)際我們也可以設(shè)置圍繞 X 軸或 Z 軸旋轉(zhuǎn)。接下來(lái)就是這個(gè)動(dòng)畫(huà)組件的應(yīng)用了，我們構(gòu)建一個(gè)帶有陰影的文字（看起來(lái)像立體字）作為這個(gè)動(dòng)畫(huà)的子組件，其他的控制和上一篇的是類(lèi)似的，完整代碼如下：

class?AnimatedWidgetDemo?extends?StatefulWidget?{
??const?AnimatedWidgetDemo({Key??key})?:?super(key:?key);

??@override
??_AnimatedWidgetDemoState?createState()?=>?_AnimatedWidgetDemoState();
}

class?_AnimatedWidgetDemoState?extends?State<AnimatedWidgetDemo>
????with?SingleTickerProviderStateMixin?{
??late?Animation<double>?animation;
??late?AnimationController?controller;

??@override
??void?initState()?{
????super.initState();
????controller?=
????????AnimationController(duration:?const?Duration(seconds:?3),?vsync:?this);
????animation?=?Tween<double>(begin:?0.0,?end:?1.0).animate(controller);
??}

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('AnimatedWidget?動(dòng)畫(huà)'),
??????),
??????body:?ThreeDAnimatedWidget(
????????animation:?animation,
????????child:?Text(
??????????'島上碼農(nóng)',
??????????style:?TextStyle(
????????????fontSize:?42.0,
????????????color:?Colors.blue,
????????????fontWeight:?FontWeight.bold,
????????????shadows:?[
??????????????Shadow(
??????????????????blurRadius:?2,
??????????????????offset:?Offset(2.0,?1.0),
??????????????????color:?Colors.blue[900]!),
????????????],
??????????),
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Icon(Icons.play_arrow,?color:?Colors.white),
????????onPressed:?()?{
??????????if?(controller.status?==?AnimationStatus.completed)?{
????????????controller.reverse();
??????????}?else?{
????????????controller.forward();
??????????}
????????},
??????),
????);
??}

??@override
??void?dispose()?{
????controller.dispose();
????super.dispose();
??}
}

可以看到，這個(gè) ThreeDAnimatedWidget 可以做到復(fù)用了，在需要這樣動(dòng)效的場(chǎng)景里，按照上面的方式給它傳入 Animation 對(duì)象和子組件就可以了。例如我們將文字修改為一張圖片。

//...
body:?ThreeDAnimatedWidget(
??animation:?animation,
??child:?Image.asset(
????'images/avatar.jpg',
????width:?100,
????height:?100,
??),
),
//...

圖片旋轉(zhuǎn).gif

總結(jié)

本篇介紹了 AnimatedWidget 的使用，通過(guò) AnimatedWidget 可以構(gòu)建可復(fù)用的動(dòng)畫(huà)組件。同時(shí)，還通過(guò) Container 的 transform 屬性加上 AnimatedWidget 實(shí)現(xiàn)了三維空間的旋轉(zhuǎn)效果。實(shí)際開(kāi)發(fā)過(guò)程中，我們可以基于 AnimatedWidget 構(gòu)建很多個(gè)性化的、可復(fù)用的動(dòng)畫(huà)組件，提升應(yīng)用的趣味性。

以上就是Android Flutter實(shí)現(xiàn)3D動(dòng)畫(huà)效果示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter 3D動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: