這篇文章主要為大家展示了“如何實(shí)現(xiàn)Flutter動(dòng)畫(huà)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)Flutter動(dòng)畫(huà)”這篇文章吧。
創(chuàng)新互聯(lián)公司主營(yíng)大祥網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā),大祥h5小程序制作搭建,大祥網(wǎng)站營(yíng)銷推廣歡迎大祥等地區(qū)企業(yè)咨詢
為了能夠?qū)崿F(xiàn)動(dòng)畫(huà)效果，必須提供下面的三個(gè)元素：
Ticker
Animation
AnimationController
下面對(duì)這幾個(gè)元素進(jìn)行一下簡(jiǎn)單的介紹，更詳細(xì)的在后面說(shuō)明。
簡(jiǎn)單來(lái)說(shuō)，Ticker 這個(gè)類會(huì)在常規(guī)的一個(gè)時(shí)間區(qū)間里（大約每秒 60 次），發(fā)送一個(gè)信號(hào)，把這想象成你得手表，每秒都會(huì)滴答滴答的轉(zhuǎn)。
當(dāng) Ticker 啟動(dòng)之后，自從第一個(gè) tick 到來(lái)開(kāi)始，每個(gè)到的 tick 都會(huì)回調(diào) Ticker 的 callback 方法。
重要提示
盡管所有的 ticker 可能是在不同的時(shí)間里啟動(dòng)的，但是它們總是以同步的方式執(zhí)行，這對(duì)于一些同步動(dòng)畫(huà)是很有用的。
Animation 其實(shí)沒(méi)有什么特別的，只不過(guò)是一個(gè)可以隨著動(dòng)畫(huà)的生命周期改變的一個(gè)值（有特定的類型），值隨著動(dòng)畫(huà)時(shí)間的變化而變化的方式可以是線性的（例如1、2、3、4、5...），也可以更為復(fù)雜（參考后面的“Curves 曲線”）。
AnimationController 是一個(gè)可以控制一個(gè)或多個(gè)動(dòng)畫(huà)（開(kāi)始，結(jié)束，重復(fù)）的控制器。換句話說(shuō)，它讓上面說(shuō)的 Animation 值在一個(gè)指定的時(shí)間內(nèi)，根據(jù)一個(gè)速度從一個(gè)最小值變化到最大。
此類可控制動(dòng)畫(huà)。為了更加精確，我寧愿說(shuō)“ 控制一個(gè)場(chǎng)景”，因?yàn)樯院笪覀儗⒖吹?，幾個(gè)不同的動(dòng)畫(huà)可以由同一個(gè)控制器來(lái)控制……
因此，使用這個(gè)AnimationController類，我們可以：
開(kāi)始一個(gè)子動(dòng)畫(huà)，正向或者反向播放
停止一個(gè)子動(dòng)畫(huà)
為子動(dòng)畫(huà)設(shè)置一個(gè)具體的值
定義動(dòng)畫(huà)值的邊界
以下偽代碼可以展示這個(gè)類里面的不同的初始化參數(shù)
AnimationController controller = new AnimationController( value: // the current value of the animation, usually 0.0 (= default) lowerBound: // the lowest value of the animation, usually 0.0 (= default) upperBound: // the highest value of the animation, usually 1.0 (= default) duration: // the total duration of the whole animation (scene) vsync: // the ticker provider debugLabel: // a label to be used to identify the controller // during debug session); 復(fù)制代碼
在大多數(shù)情況下，初始化 AnimationController 時(shí)不會(huì)設(shè)計(jì)到 value，lowerBound，upperBound和debugLabel。
為了讓動(dòng)畫(huà)正常工作，必須將 AnimationController 綁定到 Ticker 上。
通常情況下，你可以生成一個(gè) Ticker 綁定到一個(gè) StatefulWidget 實(shí)例上。
class _MyStateWidget extends Statewith SingleTickerProviderStateMixin { AnimationController _controller; @override void initState(){ super.initState(); _controller = new AnimationController( duration: const Duration(milliseconds: 1000), vsync: this, ); } @override void dispose(){ _controller.dispose(); super.dispose(); } ... } 復(fù)制代碼
第 2 行 這行代碼告訴 Flutter ，你想要一個(gè)單 Ticker，這個(gè) Ticker 鏈接到了 MyStateWidget 實(shí)例上。
8-10行
控制器的初始化。場(chǎng)景（子動(dòng)畫(huà)）的總持續(xù)時(shí)間設(shè)置為1000毫秒，并綁定到了 Ticker（vsync：this）。
隱式參數(shù)為：lowerBound = 0.0 和 upperBound = 1.0
16行
非常重要，當(dāng) MyStateWidget 這個(gè)頁(yè)面的實(shí)例銷毀時(shí)，您需要釋放 controller。
TickerProviderStateMixin 還是 SingleTickerProviderStateMixin？
如果你有幾個(gè)Animation Controller情況下，你想有不同的 Ticker， 只需要將 SingleTickerProviderStateMixin 替換為 TickerProviderStateMixin。
正是由于 ticker,每秒鐘將會(huì)產(chǎn)生大約 60 個(gè) tick，AnimationController 將根據(jù) tick 在給定的時(shí)間里，線性的產(chǎn)生在最小值和最大值之間的值。
在這1000毫秒內(nèi)產(chǎn)生的值的示例如下：
image.png
我們看到值在1000毫秒內(nèi)從0.0（lowerBound）到1.0（upperBound）變化。生成了51個(gè)不同的值。
讓我們擴(kuò)展代碼以查看如何使用它。
class _MyStateWidget extends Statewith SingleTickerProviderStateMixin { AnimationController _controller; @override void initState(){ super.initState(); _controller = new AnimationController( duration: const Duration(milliseconds: 1000), vsync: this, ); _controller.addListener((){ setState((){}); }); _controller.forward(); } @override void dispose(){ _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context){ final int percent = (_controller.value * 100.0).round(); return new Scaffold( body: new Container( child: new Center( child: new Text('$percent%'), ), ), ); } } 復(fù)制代碼
12 行 此行告訴控制器，每次其值更改時(shí)，我們都需要重建Widget（通過(guò)setState（））
第15行
Widget初始化完成后，我們告訴控制器開(kāi)始計(jì)數(shù)（forward（） -> 從lowerBound到upperBound）
26行
我們檢索控制器的值（_controller.value），并且在此示例中，此值的范圍是0.0到1.0（也就是 0％ 到 100％），我們得到此百分比的整數(shù)表達(dá)式，將其顯示在頁(yè)面的中心。
如我們所見(jiàn)， controller 可以以線性的方式返回彼此不同的小數(shù)值。
有的時(shí)候我們可能還有其他的需求如：
使用其他類型的值，例如Offset，int …
使用范圍不是從0.0到1.0
考慮線性變化以外的其他變化類型以產(chǎn)生一些效果
為了能夠使用其他值類型，Animation 類使用模板。
換句話說(shuō)，您可以定義：
AnimationintegerVariation; Animation decimalVariation; Animation offsetVariation; 復(fù)制代碼
有時(shí)，我們希望使用一個(gè)不同的范圍，而不是0.0和1.0。
為了定義這樣的范圍，我們將使用 Tween 類。
為了說(shuō)明這一點(diǎn)，讓我們考慮一個(gè)情況，您希望角度從0到π/ 2 變化的情況。
AnimationangleAnimation = new Tween(begin: 0.0, end: pi/2); 復(fù)制代碼
如前所述，將默認(rèn)值從 lowerBound 變化到 upperBound 的默認(rèn)方式是線性的，controller 就是這么控制的。
如果要使角度從0到π/ 2 弧度線性變化，請(qǐng)將 Animation 綁定到AnimationController：
AnimationangleAnimation = new Tween(begin: 0.0, end: pi/2).animate(_controller); 復(fù)制代碼
當(dāng)您開(kāi)始動(dòng)畫(huà)（通過(guò)_controller.forward（））時(shí)，angleAnimation.value 將使用 _controller.value 來(lái)獲取 范圍[0.0; π/ 2] 中的值。
下圖顯示了這種線性變化（π/ 2 = 1.57）
image.png
Flutter 提供了一組預(yù)定義的 Curved 變化，如下：
image.png
要使用這些曲線效果：
AnimationangleAnimation = new Tween(begin: 0.0, end: pi/2).animate( new CurvedAnimation( parent: _controller, curve: Curves.ease, reverseCurve: Curves.easeOut )); 復(fù)制代碼
這將產(chǎn)生值[0; π/ 2] 之間的值：
當(dāng)正向播放動(dòng)畫(huà)，數(shù)值從 0 到 π/2 ，會(huì)使用 Curves.ease 效果
當(dāng)反向播放動(dòng)畫(huà)，數(shù)值從 π/2 到 0，會(huì)使用 Curves.easeOut 效果
該AnimationController 類可以讓你通過(guò) API 來(lái)控制動(dòng)畫(huà)。（以下是最常用的API）：
_controller.forward（{兩個(gè)區(qū)間的值}）
要求控制器開(kāi)始生成 lowerBound- > upperBound中的值
from 的可選參數(shù)可用于強(qiáng)制控制器從lowerBound之外的另一個(gè)值開(kāi)始“ 計(jì)數(shù) ”
_controller.reverse（{兩個(gè)區(qū)間的值}）
要求控制器開(kāi)始生成 upperBound- > lowerBound中的值
from的可選參數(shù)可用于強(qiáng)制控制器從“ upperBound ”之外的另一個(gè)值開(kāi)始“ 計(jì)數(shù) ”
_controller.stop（{bool cancelled：true}）
停止運(yùn)行動(dòng)畫(huà)
_controller.reset（）
將動(dòng)畫(huà)重置為從 LowerBound 開(kāi)始
_controller.animateTo(double target, { Duration duration, Curve curve: Curves.linear })
將動(dòng)畫(huà)的當(dāng)前值改變到目標(biāo)值。
_controller.repeat（{double min，double max，Duration period}）
開(kāi)始以正向運(yùn)行動(dòng)畫(huà)，并在動(dòng)畫(huà)完成后重新啟動(dòng)動(dòng)畫(huà)。如果定義了 min 或者 max ，將限制動(dòng)畫(huà)的重復(fù)執(zhí)行次數(shù)。
由于動(dòng)畫(huà)可能會(huì)意外停止（例如關(guān)閉屏幕），因此在使用以下API之一時(shí)，添加“ .orCancel ” 更為安全：
__controller.forward().orCancel; 復(fù)制代碼
這個(gè)小技巧，可以保證，在 _controller 釋放之前，如果 Ticker 取消了，將不會(huì)導(dǎo)致異常。
官方文檔中不存在“ 場(chǎng)景 ”一詞，但就我個(gè)人而言，我發(fā)現(xiàn)它更接近現(xiàn)實(shí)。我來(lái)解釋一下。
如我所說(shuō)，一個(gè) AnimationController 管理一個(gè)Animation。但是，我們可能將“ 動(dòng)畫(huà) ” 一詞理解為一系列需要依次播放或重疊播放的子動(dòng)畫(huà)。將子動(dòng)畫(huà)組合在一起，這就是我所說(shuō)的“ 場(chǎng)景 ”。
考慮以下情況，其中動(dòng)畫(huà)的整個(gè)持續(xù)時(shí)間為10秒，我們希望達(dá)到的效果是：
在開(kāi)始的2秒內(nèi)，有一個(gè)球從屏幕的左側(cè)移動(dòng)到屏幕的中間
然后，同一個(gè)球需要3秒鐘才能從屏幕中心移動(dòng)到屏幕頂部中心
最終，球需要5秒鐘才能消失。 正如您最可能已經(jīng)想到的那樣，我們必須考慮3種不同的動(dòng)畫(huà)：
////// Definition of the _controller with a whole duration of 10 seconds///AnimationController _controller = new AnimationController( duration: const Duration(seconds: 10), vsync: this);////// First animation that moves the ball from the left to the center///AnimationmoveLeftToCenter = new Tween( begin: new Offset(0.0, screenHeight /2), end: new Offset(screenWidth /2, screenHeight /2) ).animate(_controller);////// Second animation that moves the ball from the center to the top///Animation moveCenterToTop = new Tween( begin: new Offset(screenWidth /2, screenHeight /2), end: new Offset(screenWidth /2, 0.0) ).animate(_controller);////// Third animation that will be used to change the opacity of the ball to make it disappear///Animation disappear = new Tween( begin: 1.0, end: 0.0).animate(_controller); 復(fù)制代碼
現(xiàn)在的問(wèn)題是，我們?nèi)绾捂溄樱ɑ蚓幣牛┳觿?dòng)畫(huà)？
組合動(dòng)畫(huà)可以通過(guò) Interval 這個(gè)類來(lái)實(shí)現(xiàn)。但是，那什么是 Interval?
可能和我們腦子里首先想到的不一樣， Interval 和時(shí)間沒(méi)有關(guān)系，而是一組值的范圍。
如果考慮使用 _controller，則必須記住，它會(huì)使值從 lowerBound 到 upperBound 變化。
通常，這兩個(gè)值基本定義為 lowerBound = 0.0 和 upperBound = 1.0，這使動(dòng)畫(huà)計(jì)算更容易，因?yàn)閇0.0-> 1.0]只是從0％到100％的變化。因此，如果一個(gè)場(chǎng)景的總持續(xù)時(shí)間為10秒，則最有可能在5秒后，相應(yīng)的_controller.value將非常接近0.5（= 50％）。
如果將3個(gè)不同的動(dòng)畫(huà)放在一個(gè)時(shí)間軸上，則可以獲得如下示意圖：
image.png
如果現(xiàn)在考慮值的間隔，則對(duì)于3個(gè)動(dòng)畫(huà)中的每個(gè)動(dòng)畫(huà)，我們將得到：
moveLeftToCenter
持續(xù)時(shí)間：2秒，從0秒開(kāi)始，以2秒結(jié)束=>范圍= [0; 2] =>百分比：從整個(gè)場(chǎng)景的0％到20％=> [0.0; 0.20]
moveCenterToTop
持續(xù)時(shí)間：3秒，開(kāi)始于2秒，結(jié)束于5秒=>范圍= [2; 5] =>百分比：從整個(gè)場(chǎng)景的20％到50％=> [0.20; 0.50]
disappear
持續(xù)時(shí)間：5秒，開(kāi)始于5秒，結(jié)束于10秒=>范圍= [5; 10] =>百分比：從整個(gè)場(chǎng)景的50％到100％=> [0.50; 1.0]
現(xiàn)在我們有了這些百分比，我們得到每個(gè)動(dòng)畫(huà)的定義，如下：
////// Definition of the _controller with a whole duration of 10 seconds///AnimationController _controller = new AnimationController( duration: const Duration(seconds: 10), vsync: this);////// First animation that moves the ball from the left to the center///AnimationmoveLeftToCenter = new Tween( begin: new Offset(0.0, screenHeight /2), end: new Offset(screenWidth /2, screenHeight /2) ).animate( new CurvedAnimation( parent: _controller, curve: new Interval( 0.0, 0.20, curve: Curves.linear, ), ), );////// Second animation that moves the ball from the center to the top///Animation moveCenterToTop = new Tween( begin: new Offset(screenWidth /2, screenHeight /2), end: new Offset(screenWidth /2, 0.0) ).animate( new CurvedAnimation( parent: _controller, curve: new Interval( 0.20, 0.50, curve: Curves.linear, ), ), );////// Third animation that will be used to change the opacity of the ball to make it disappear///Animation disappear = new Tween(begin: 1.0, end: 0.0) .animate( new CurvedAnimation( parent: _controller, curve: new Interval( 0.50, 1.0, curve: Curves.linear, ), ), ); 復(fù)制代碼
這就是定義場(chǎng)景（或一系列動(dòng)畫(huà)）所需的全部設(shè)置。當(dāng)然，沒(méi)有什么可以阻止您重疊子動(dòng)畫(huà)…
有時(shí)，獲取動(dòng)畫(huà)（或場(chǎng)景）的狀態(tài)很方便。
動(dòng)畫(huà)可能具有4種不同的狀態(tài)：
dismissed：動(dòng)畫(huà)在開(kāi)始后停止（或尚未開(kāi)始）
forward：動(dòng)畫(huà)從頭到尾運(yùn)行
reverse：動(dòng)畫(huà)反向播放
completed：動(dòng)畫(huà)在播放后停止
要獲得此狀態(tài)，我們需要通過(guò)以下方式監(jiān)聽(tīng)動(dòng)畫(huà)狀態(tài)的變化：
重慶分公司
重慶分公司
myAnimation.addStatusListener((AnimationStatus status){ switch(status){ case AnimationStatus.dismissed:
... break; case AnimationStatus.forward:
... break; case AnimationStatus.reverse:
... break; case AnimationStatus.completed:
... break;
}
});
復(fù)制代碼狀態(tài)應(yīng)用的典型示例就是狀態(tài)的切換。例如，動(dòng)畫(huà)完成后，我們要反轉(zhuǎn)它，如：
myAnimation.addStatusListener((AnimationStatus status){ switch(status){ ///
/// When the animation is at the beginning, we force the animation to play
///
case AnimationStatus.dismissed:
_controller.forward(); break; ///
/// When the animation is at the end, we force the animation to reverse
///
case AnimationStatus.completed:
_controller.reverse(); break;
}
});
復(fù)制代碼我在文章開(kāi)頭提到了一個(gè)動(dòng)畫(huà)，現(xiàn)在我準(zhǔn)備開(kāi)始實(shí)現(xiàn)它，名字就叫“guillotine(斷頭臺(tái))”
未來(lái)能夠?qū)崿F(xiàn)“斬頭臺(tái)”效果，我們需要考慮一下幾個(gè)方面：
頁(yè)面內(nèi)容本身
當(dāng)我們點(diǎn)擊菜單圖標(biāo)時(shí),菜單欄會(huì)旋轉(zhuǎn)
旋轉(zhuǎn)時(shí)，菜單會(huì)覆蓋頁(yè)面內(nèi)容并填充整個(gè)視口
一旦菜單是完全可見(jiàn)，我們?cè)俅吸c(diǎn)擊圖標(biāo)，菜單旋轉(zhuǎn)出來(lái)，以便回到原來(lái)的位置和尺寸
從這些觀察中，我們可以立即得出結(jié)論，我們沒(méi)有使用帶有AppBar的普通Scaffold（因?yàn)楹笳呤枪潭ǖ模?/p>
我們需要使用 2 層 Stack：
頁(yè)面內(nèi)容（下層）
菜單（上層）
程序的基本框架基本出來(lái)了：
class MyPage extends StatefulWidget { @override
_MyPageState createState() => new _MyPageState();
}class _MyPageState extends State{ @override
Widget build(BuildContext context){ return SafeArea(
top: false,
bottom: false,
child: new Container(
child: new Stack(
alignment: Alignment.topLeft,
children: [ new Page(), new GuillotineMenu(),
],
),
),
);
}
}class Page extends StatelessWidget { @override
Widget build(BuildContext context){ return new Container(
padding: const EdgeInsets.only(top: 90.0),
color: Color(0xff222222),
);
}
}class GuillotineMenu extends StatefulWidget { @override
_GuillotineMenuState createState() => new _GuillotineMenuState();
}class _GuillotineMenuState extends State { @overrride
Widget build(BuildContext context){ return new Container(
color: Color(0xff333333),
);
}
}
復(fù)制代碼 這些代碼的運(yùn)行結(jié)果為黑屏，僅顯示覆蓋整個(gè)視口的GuillotineMenu。
如果你看了上面的示例，可以看到菜單完全打開(kāi)時(shí)，它完全覆蓋了視口。打開(kāi)后，只有可見(jiàn)的AppBa。
而如果最初旋轉(zhuǎn) GuillotineMenu 并在按下菜單按鈕時(shí)將其旋轉(zhuǎn)π/ 2，將會(huì)怎樣呢，如下圖所示這樣嗎？
image.png
然后，我們可以按以下方式重寫(xiě)_GuillotineMenuState類：（這里不在解釋如何布局，這不是重點(diǎn)）
class _GuillotineMenuState extends State{ double rotationAngle = 0.0; @override Widget build(BuildContext context){ MediaQueryData mediaQueryData = MediaQuery.of(context); double screenWidth = mediaQueryData.size.width; double screenHeight = mediaQueryData.size.height; return new Transform.rotate( angle: rotationAngle, origin: new Offset(24.0, 56.0), alignment: Alignment.topLeft, child: Material( color: Colors.transparent, child: Container( width: screenWidth, height: screenHeight, color: Color(0xFF333333), child: new Stack( children: [ _buildMenuTitle(), _buildMenuIcon(), _buildMenuContent(), ], ), ), ), ); } /// /// Menu Title /// Widget _buildMenuTitle(){ return new Positioned( top: 32.0, left: 40.0, width: screenWidth, height: 24.0, child: new Transform.rotate( alignment: Alignment.topLeft, origin: Offset.zero, angle: pi / 2.0, child: new Center( child: new Container( width: double.infinity, height: double.infinity, child: new Opacity( opacity: 1.0, child: new Text('ACTIVITY', textAlign: TextAlign.center, style: new TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold, letterSpacing: 2.0, )), ), ), )), ); } /// /// Menu Icon /// Widget _buildMenuIcon(){ return new Positioned( top: 32.0, left: 4.0, child: new IconButton( icon: const Icon( Icons.menu, color: Colors.white, ), onPressed: (){}, ), ); } /// /// Menu content /// Widget _buildMenuContent(){ final List
10-13行
這些線定義了斷頭臺(tái)菜單圍繞旋轉(zhuǎn)中心（菜單圖標(biāo)的位置）的旋轉(zhuǎn)
現(xiàn)在，此代碼的結(jié)果將顯示一個(gè)未旋轉(zhuǎn)的菜單屏幕（因?yàn)閞otationAngle = 0.0），該屏幕顯示了垂直的標(biāo)題。
如果更新 rotationAngle 的值（在-π/ 2和0之間），您將看到菜單旋轉(zhuǎn)了相應(yīng)的角度。
如前所述，我們需要
一個(gè)SingleTickerProviderStateMixin，因?yàn)槲覀冎挥?個(gè)場(chǎng)景
一個(gè)AnimationController
一個(gè)動(dòng)畫(huà) 有一個(gè)角度變化
代碼如下所示：
class _GuillotineMenuState extends Statewith SingleTickerProviderStateMixin { AnimationController animationControllerMenu; Animation animationMenu; /// /// Menu Icon, onPress() handling /// _handleMenuOpenClose(){ animationControllerMenu.forward(); } @override void initState(){ super.initState(); /// /// Initialization of the animation controller /// animationControllerMenu = new AnimationController( duration: const Duration(milliseconds: 1000), vsync: this )..addListener((){ setState((){}); }); /// /// Initialization of the menu appearance animation /// _rotationAnimation = new Tween( begin: -pi/2.0, end: 0.0 ).animate(animationControllerMenu); } @override void dispose(){ animationControllerMenu.dispose(); super.dispose(); } @override Widget build(BuildContext context){ MediaQueryData mediaQueryData = MediaQuery.of(context); double screenWidth = mediaQueryData.size.width; double screenHeight = mediaQueryData.size.height; double angle = animationMenu.value; return new Transform.rotate( angle: angle, origin: new Offset(24.0, 56.0), alignment: Alignment.topLeft, child: Material( color: Colors.transparent, child: Container( width: screenWidth, height: screenHeight, color: Color(0xFF333333), child: new Stack( children: [ _buildMenuTitle(), _buildMenuIcon(), _buildMenuContent(), ], ), ), ), ); } ... /// /// Menu Icon /// Widget _buildMenuIcon(){ return new Positioned( top: 32.0, left: 4.0, child: new IconButton( icon: const Icon( Icons.menu, color: Colors.white, ), onPressed: _handleMenuOpenClose, ), ); } ... } 復(fù)制代碼
現(xiàn)在，當(dāng)我們按下菜單按鈕時(shí)，菜單會(huì)打開(kāi)，但再次按下按鈕時(shí)菜單不會(huì)關(guān)閉。這是 AnimationStatus 要完成的事情。
讓我們添加一個(gè)監(jiān)聽(tīng)器，并基于 AnimationStatus 決定是向前還是向后運(yùn)行動(dòng)畫(huà)。
////// Menu animation status///enum _GuillotineAnimationStatus { closed, open, animating }class _GuillotineMenuState extends State with SingleTickerProviderStateMixin {
AnimationController animationControllerMenu;
Animation animationMenu;
_GuillotineAnimationStatus menuAnimationStatus = _GuillotineAnimationStatus.closed;
_handleMenuOpenClose(){ if (menuAnimationStatus == _GuillotineAnimationStatus.closed){
animationControllerMenu.forward().orCancel;
} else if (menuAnimationStatus == _GuillotineAnimationStatus.open) {
animationControllerMenu.reverse().orCancel;
}
} @override
void initState(){ super.initState(); ///
/// Initialization of the animation controller
///
animationControllerMenu = new AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this
)..addListener((){
setState((){});
})..addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { ///
/// When the animation is at the end, the menu is open
///
menuAnimationStatus = _GuillotineAnimationStatus.open;
} else if (status == AnimationStatus.dismissed) { ///
/// When the animation is at the beginning, the menu is closed
///
menuAnimationStatus = _GuillotineAnimationStatus.closed;
} else { ///
/// Otherwise the animation is running
///
menuAnimationStatus = _GuillotineAnimationStatus.animating;
}
});
...
}
...
}
復(fù)制代碼 現(xiàn)在菜單可以按預(yù)期方式打開(kāi)或關(guān)閉，但是前面的演示向我們展示了一個(gè)打開(kāi)/關(guān)閉的動(dòng)畫(huà)，該懂哈不是線性的，看起來(lái)有一個(gè)反復(fù)的回彈效果。接下來(lái)讓我們添加此效果。
為此，我將選擇以下2種效果：
菜單打開(kāi)時(shí)用 bounceOut
菜單關(guān)閉時(shí)用 bouncIn
image.png
image.png
class _GuillotineMenuState extends Statewith SingleTickerProviderStateMixin { ... @override void initState(){ ... /// /// Initialization of the menu appearance animation /// animationMenu = new Tween( begin: -pi / 2.0, end: 0.0 ).animate(new CurvedAnimation( parent: animationControllerMenu, curve: Curves.bounceOut, reverseCurve: Curves.bounceIn, )); } ... } 復(fù)制代碼
在此實(shí)現(xiàn)中仍有一些細(xì)節(jié)沒(méi)有實(shí)現(xiàn)：打開(kāi)菜單時(shí)標(biāo)題消失，而關(guān)閉菜單時(shí)顯示標(biāo)題。這是一個(gè)面朝上/朝外的效果，也要作為動(dòng)畫(huà)處理。讓我們添加它。
class _GuillotineMenuState extends Statewith SingleTickerProviderStateMixin { AnimationController animationControllerMenu; Animation animationMenu; Animation animationTitleFadeInOut; _GuillotineAnimationStatus menuAnimationStatus; ... @override void initState(){ ... /// /// Initialization of the menu title fade out/in animation /// animationTitleFadeInOut = new Tween( begin: 1.0, end: 0.0 ).animate(new CurvedAnimation( parent: animationControllerMenu, curve: new Interval( 0.0, 0.5, curve: Curves.ease, ), )); } ... /// /// Menu Title /// Widget _buildMenuTitle(){ return new Positioned( top: 32.0, left: 40.0, width: screenWidth, height: 24.0, child: new Transform.rotate( alignment: Alignment.topLeft, origin: Offset.zero, angle: pi / 2.0, child: new Center( child: new Container( width: double.infinity, height: double.infinity, child: new Opacity( opacity: animationTitleFadeInOut.value, child: new Text('ACTIVITY', textAlign: TextAlign.center, style: new TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold, letterSpacing: 2.0, )), ), ), )), ); } ... } 復(fù)制代碼
最終的效果基本如下：
以上是“如何實(shí)現(xiàn)Flutter動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
