溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何實現Flutter動畫”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何實現Flutter動畫”這篇文章吧。
為了能夠實現動畫效果，必須提供下面的三個元素：
Ticker
Animation
AnimationController
下面對這幾個元素進行一下簡單的介紹，更詳細的在后面說明。
簡單來說，Ticker 這個類會在常規的一個時間區間里（大約每秒 60 次），發送一個信號，把這想象成你得手表，每秒都會滴答滴答的轉。
當 Ticker 啟動之后，自從第一個 tick 到來開始，每個到的 tick 都會回調 Ticker 的 callback 方法。
重要提示
盡管所有的 ticker 可能是在不同的時間里啟動的，但是它們總是以同步的方式執行，這對于一些同步動畫是很有用的。
Animation 其實沒有什么特別的，只不過是一個可以隨著動畫的生命周期改變的一個值（有特定的類型），值隨著動畫時間的變化而變化的方式可以是線性的（例如1、2、3、4、5...），也可以更為復雜（參考后面的“Curves 曲線”）。
AnimationController 是一個可以控制一個或多個動畫（開始，結束，重復）的控制器。換句話說，它讓上面說的 Animation 值在一個指定的時間內，根據一個速度從一個最小值變化到最大。
此類可控制動畫。為了更加精確，我寧愿說“ 控制一個場景”，因為稍后我們將看到，幾個不同的動畫可以由同一個控制器來控制……
因此，使用這個AnimationController類，我們可以：
開始一個子動畫，正向或者反向播放
停止一個子動畫
為子動畫設置一個具體的值
定義動畫值的邊界
以下偽代碼可以展示這個類里面的不同的初始化參數
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); 復制代碼
在大多數情況下，初始化 AnimationController 時不會設計到 value，lowerBound，upperBound和debugLabel。
為了讓動畫正常工作，必須將 AnimationController 綁定到 Ticker 上。
通常情況下，你可以生成一個 Ticker 綁定到一個 StatefulWidget 實例上。
class _MyStateWidget extends State<MyStateWidget> with 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();
}
...
}
復制代碼第 2 行 這行代碼告訴 Flutter ，你想要一個單 Ticker，這個 Ticker 鏈接到了 MyStateWidget 實例上。
8-10行
控制器的初始化。場景（子動畫）的總持續時間設置為1000毫秒，并綁定到了 Ticker（vsync：this）。
隱式參數為：lowerBound = 0.0 和 upperBound = 1.0
16行
非常重要，當 MyStateWidget 這個頁面的實例銷毀時，您需要釋放 controller。
TickerProviderStateMixin 還是 SingleTickerProviderStateMixin？
如果你有幾個Animation Controller情況下，你想有不同的 Ticker， 只需要將 SingleTickerProviderStateMixin 替換為 TickerProviderStateMixin。
正是由于 ticker,每秒鐘將會產生大約 60 個 tick，AnimationController 將根據 tick 在給定的時間里，線性的產生在最小值和最大值之間的值。
在這1000毫秒內產生的值的示例如下：
image.png
我們看到值在1000毫秒內從0.0（lowerBound）到1.0（upperBound）變化。生成了51個不同的值。
讓我們擴展代碼以查看如何使用它。
class _MyStateWidget extends State<MyStateWidget> with 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%'),
),
),
);
}
}
復制代碼12 行 此行告訴控制器，每次其值更改時，我們都需要重建Widget（通過setState（））
第15行
Widget初始化完成后，我們告訴控制器開始計數（forward（） -> 從lowerBound到upperBound）
26行
我們檢索控制器的值（_controller.value），并且在此示例中，此值的范圍是0.0到1.0（也就是 0％ 到 100％），我們得到此百分比的整數表達式，將其顯示在頁面的中心。
如我們所見， controller 可以以線性的方式返回彼此不同的小數值。
有的時候我們可能還有其他的需求如：
使用其他類型的值，例如Offset，int …
使用范圍不是從0.0到1.0
考慮線性變化以外的其他變化類型以產生一些效果
為了能夠使用其他值類型，Animation 類使用模板。
換句話說，您可以定義：
Animation<int> integerVariation; Animation<double> decimalVariation; Animation<Offset> offsetVariation; 復制代碼
有時，我們希望使用一個不同的范圍，而不是0.0和1.0。
為了定義這樣的范圍，我們將使用 Tween 類。
為了說明這一點，讓我們考慮一個情況，您希望角度從0到π/ 2 變化的情況。
Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2); 復制代碼
如前所述，將默認值從 lowerBound 變化到 upperBound 的默認方式是線性的，controller 就是這么控制的。
如果要使角度從0到π/ 2 弧度線性變化，請將 Animation 綁定到AnimationController：
Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2).animate(_controller); 復制代碼
當您開始動畫（通過_controller.forward（））時，angleAnimation.value 將使用 _controller.value 來獲取 范圍[0.0; π/ 2] 中的值。
下圖顯示了這種線性變化（π/ 2 = 1.57）
image.png
Flutter 提供了一組預定義的 Curved 變化，如下：
image.png
要使用這些曲線效果：
Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2).animate( new CurvedAnimation( parent: _controller, curve: Curves.ease, reverseCurve: Curves.easeOut )); 復制代碼
這將產生值[0; π/ 2] 之間的值：
當正向播放動畫，數值從 0 到 π/2 ，會使用 Curves.ease 效果
當反向播放動畫，數值從 π/2 到 0，會使用 Curves.easeOut 效果
該AnimationController 類可以讓你通過 API 來控制動畫。（以下是最常用的API）：
_controller.forward（{兩個區間的值}）
要求控制器開始生成 lowerBound- > upperBound中的值
from 的可選參數可用于強制控制器從lowerBound之外的另一個值開始“ 計數 ”
_controller.reverse（{兩個區間的值}）
要求控制器開始生成 upperBound- > lowerBound中的值
from的可選參數可用于強制控制器從“ upperBound ”之外的另一個值開始“ 計數 ”
_controller.stop（{bool cancelled：true}）
停止運行動畫
_controller.reset（）
將動畫重置為從 LowerBound 開始
_controller.animateTo(double target, { Duration duration, Curve curve: Curves.linear })
將動畫的當前值改變到目標值。
_controller.repeat（{double min，double max，Duration period}）
開始以正向運行動畫，并在動畫完成后重新啟動動畫。如果定義了 min 或者 max ，將限制動畫的重復執行次數。
由于動畫可能會意外停止（例如關閉屏幕），因此在使用以下API之一時，添加“ .orCancel ” 更為安全：
__controller.forward().orCancel; 復制代碼
這個小技巧，可以保證，在 _controller 釋放之前，如果 Ticker 取消了，將不會導致異常。
官方文檔中不存在“ 場景 ”一詞，但就我個人而言，我發現它更接近現實。我來解釋一下。
如我所說，一個 AnimationController 管理一個Animation。但是，我們可能將“ 動畫 ” 一詞理解為一系列需要依次播放或重疊播放的子動畫。將子動畫組合在一起，這就是我所說的“ 場景 ”。
考慮以下情況，其中動畫的整個持續時間為10秒，我們希望達到的效果是：
在開始的2秒內，有一個球從屏幕的左側移動到屏幕的中間
然后，同一個球需要3秒鐘才能從屏幕中心移動到屏幕頂部中心
最終，球需要5秒鐘才能消失。 正如您最可能已經想到的那樣，我們必須考慮3種不同的動畫：
////// 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///Animation<Offset> moveLeftToCenter = 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<Offset> 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<double> disappear = new Tween( begin: 1.0, end: 0.0).animate(_controller); 復制代碼
現在的問題是，我們如何鏈接（或編排）子動畫？
組合動畫可以通過 Interval 這個類來實現。但是，那什么是 Interval?
可能和我們腦子里首先想到的不一樣， Interval 和時間沒有關系，而是一組值的范圍。
如果考慮使用 _controller，則必須記住，它會使值從 lowerBound 到 upperBound 變化。
通常，這兩個值基本定義為 lowerBound = 0.0 和 upperBound = 1.0，這使動畫計算更容易，因為[0.0-> 1.0]只是從0％到100％的變化。因此，如果一個場景的總持續時間為10秒，則最有可能在5秒后，相應的_controller.value將非常接近0.5（= 50％）。
如果將3個不同的動畫放在一個時間軸上，則可以獲得如下示意圖：
image.png
如果現在考慮值的間隔，則對于3個動畫中的每個動畫，我們將得到：
moveLeftToCenter
持續時間：2秒，從0秒開始，以2秒結束=>范圍= [0; 2] =>百分比：從整個場景的0％到20％=> [0.0; 0.20]
moveCenterToTop
持續時間：3秒，開始于2秒，結束于5秒=>范圍= [2; 5] =>百分比：從整個場景的20％到50％=> [0.20; 0.50]
disappear
持續時間：5秒，開始于5秒，結束于10秒=>范圍= [5; 10] =>百分比：從整個場景的50％到100％=> [0.50; 1.0]
現在我們有了這些百分比，我們得到每個動畫的定義，如下：
////// 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///Animation<Offset> moveLeftToCenter = 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<Offset> 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<double> disappear = new Tween(begin: 1.0, end: 0.0) .animate( new CurvedAnimation( parent: _controller, curve: new Interval( 0.50, 1.0, curve: Curves.linear, ), ), ); 復制代碼
這就是定義場景（或一系列動畫）所需的全部設置。當然，沒有什么可以阻止您重疊子動畫…
有時，獲取動畫（或場景）的狀態很方便。
動畫可能具有4種不同的狀態：
dismissed：動畫在開始后停止（或尚未開始）
forward：動畫從頭到尾運行
reverse：動畫反向播放
completed：動畫在播放后停止
要獲得此狀態，我們需要通過以下方式監聽動畫狀態的變化：
myAnimation.addStatusListener((AnimationStatus status){ switch(status){ case AnimationStatus.dismissed:
... break; case AnimationStatus.forward:
... break; case AnimationStatus.reverse:
... break; case AnimationStatus.completed:
... break;
}
});
復制代碼狀態應用的典型示例就是狀態的切換。例如，動畫完成后，我們要反轉它，如：
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;
}
});
復制代碼我在文章開頭提到了一個動畫，現在我準備開始實現它，名字就叫“guillotine(斷頭臺)”
未來能夠實現“斬頭臺”效果，我們需要考慮一下幾個方面：
頁面內容本身
當我們點擊菜單圖標時,菜單欄會旋轉
旋轉時，菜單會覆蓋頁面內容并填充整個視口
一旦菜單是完全可見，我們再次點擊圖標，菜單旋轉出來，以便回到原來的位置和尺寸
從這些觀察中，我們可以立即得出結論，我們沒有使用帶有AppBar的普通Scaffold（因為后者是固定的）。
我們需要使用 2 層 Stack：
頁面內容（下層）
菜單（上層）
程序的基本框架基本出來了：
class MyPage extends StatefulWidget { @override
_MyPageState createState() => new _MyPageState();
}class _MyPageState extends State<MyPage>{ @override
Widget build(BuildContext context){ return SafeArea(
top: false,
bottom: false,
child: new Container(
child: new Stack(
alignment: Alignment.topLeft,
children: <Widget>[ 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<GuillotineMenu> { @overrride
Widget build(BuildContext context){ return new Container(
color: Color(0xff333333),
);
}
}
復制代碼這些代碼的運行結果為黑屏，僅顯示覆蓋整個視口的GuillotineMenu。
如果你看了上面的示例，可以看到菜單完全打開時，它完全覆蓋了視口。打開后，只有可見的AppBa。
而如果最初旋轉 GuillotineMenu 并在按下菜單按鈕時將其旋轉π/ 2，將會怎樣呢，如下圖所示這樣嗎？
image.png
然后，我們可以按以下方式重寫_GuillotineMenuState類：（這里不在解釋如何布局，這不是重點）
class _GuillotineMenuState extends State<GuillotineMenu> { 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: <Widget>[
_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<Map> _menus = <Map>[
{ "icon": Icons.person, "title": "profile", "color": Colors.white,
},
{ "icon": Icons.view_agenda, "title": "feed", "color": Colors.white,
},
{ "icon": Icons.swap_calls, "title": "activity", "color": Colors.cyan,
},
{ "icon": Icons.settings, "title": "settings", "color": Colors.white,
},
]; return new Padding(
padding: const EdgeInsets.only(left: 64.0, top: 96.0),
child: new Container(
width: double.infinity,
height: double.infinity,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: _menus.map((menuItem) { return new ListTile(
leading: new Icon(
menuItem["icon"],
color: menuItem["color"],
),
title: new Text(
menuItem["title"],
style: new TextStyle(
color: menuItem["color"],
fontSize: 24.0),
),
);
}).toList(),
),
),
);
}
}
復制代碼10-13行
這些線定義了斷頭臺菜單圍繞旋轉中心（菜單圖標的位置）的旋轉
現在，此代碼的結果將顯示一個未旋轉的菜單屏幕（因為rotationAngle = 0.0），該屏幕顯示了垂直的標題。
如果更新 rotationAngle 的值（在-π/ 2和0之間），您將看到菜單旋轉了相應的角度。
如前所述，我們需要
一個SingleTickerProviderStateMixin，因為我們只有1個場景
一個AnimationController
一個動畫 有一個角度變化
代碼如下所示：
class _GuillotineMenuState extends State<GuillotineMenu> with SingleTickerProviderStateMixin {
AnimationController animationControllerMenu;
Animation<double> 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: <Widget>[
_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,
),
);
}
...
}
復制代碼現在，當我們按下菜單按鈕時，菜單會打開，但再次按下按鈕時菜單不會關閉。這是 AnimationStatus 要完成的事情。
讓我們添加一個監聽器，并基于 AnimationStatus 決定是向前還是向后運行動畫。
////// Menu animation status///enum _GuillotineAnimationStatus { closed, open, animating }class _GuillotineMenuState extends State<GuillotineMenu> with SingleTickerProviderStateMixin {
AnimationController animationControllerMenu;
Animation<double> 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;
}
});
...
}
...
}
復制代碼現在菜單可以按預期方式打開或關閉，但是前面的演示向我們展示了一個打開/關閉的動畫，該懂哈不是線性的，看起來有一個反復的回彈效果。接下來讓我們添加此效果。
為此，我將選擇以下2種效果：
菜單打開時用 bounceOut
菜單關閉時用 bouncIn
image.png
image.png
class _GuillotineMenuState extends State<GuillotineMenu> with 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,
));
}
...
}
復制代碼在此實現中仍有一些細節沒有實現：打開菜單時標題消失，而關閉菜單時顯示標題。這是一個面朝上/朝外的效果，也要作為動畫處理。讓我們添加它。
class _GuillotineMenuState extends State<GuillotineMenu> with SingleTickerProviderStateMixin {
AnimationController animationControllerMenu;
Animation<double> animationMenu;
Animation<double> 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,
)),
),
),
)),
);
}
...
}
復制代碼最終的效果基本如下：
以上是“如何實現Flutter動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
