交錯動畫

你將學習到什么:

• 交錯動畫由序列或重疊的動畫組成。
• 要創建交錯動畫，使用多個動畫對象。
• 一個AnimationController控制所有動畫。
• 每個動畫對象在間隔期間指定動畫。
• 對于要設置動畫的每個屬性，請創建一個Tween。

Terminology: 如果補間或補間的概念對您來說是新的，請參閱Flutter教程中的動畫

交錯的動畫是一個直截了當的概念：視覺變化發生在一系列操作中，而不是一次性發生。 動畫可能是純粹順序的，在下一個動畫之后會發生一次更改，或者可能部分或完全重疊。 它也可能有間隙，沒有發生變化。

本指南介紹了如何在Flutter中構建交錯動畫。

Examples

本指南介紹了basic_staggered_animation示例。您還可以參考更復雜的示例staggered_pic_selection。
basic_staggered_animation

顯示單個窗口小部件的一系列連續和重疊動畫。 點擊屏幕會開始一個動畫，可以改變不透明度，大小，形狀，顏色和填充。

staggered_pic_selection

顯示從以三種尺寸之一顯示的圖像列表中刪除圖像。此示例使用兩個動畫控制器: 一個用于圖像選擇/取消選擇，另一個用于圖像刪除。 選擇/取消選擇動畫是錯開的。 (要查看此效果，您可能需要增加timeDilation 值。) 選擇一個最大的圖像，它會縮小，因為它在藍色圓圈內顯示一個復選標記。 接下來，選擇一個最小的圖像，當復選標記消失時，大圖像會擴展。 在大圖像完成展開之前，小圖像會縮小以顯示其復選標記。 這種交錯行為類似于您在Google相冊中看到的行為。

• 交錯動畫的基本結構
  • 完成交錯動畫
  • 無狀態小部件： StaggerAnimation
  • 有狀態小部件：StaggerDemo
• 資源

以下視頻演示了basic_staggered_animation執行的動畫：

StaggerDemo.gif

在視頻中，您會看到單個小部件的以下動畫，該小部件以帶有略微圓角的邊框藍色方塊開始。 該方塊按以下順序運行更改：

1. 淡入
2. 擴大
3. 向上移動時變得更高
4. 轉變為有邊界的圓圈
5. 將顏色更改為橙??色

向前跑之后，動畫反向運行。

Flutter新手?
本頁假定您知道如何使用Flutter的小部件創建布局。 有關更多信息，請參閱在Flutter中構建布局.

交錯動畫的基本結構

重點是什么？

• 所有動畫都由同一個AnimationController驅動。
• 無論動畫實時持續多長時間，控制器的值必須介于0.0和1.0之間。
• 每個動畫的間隔介于0.0和1.0之間。
• 對于在間隔中設置動畫的每個屬性，請創建一個Tween。 Tween指定該屬性的開始值和結束值。
• Tween生成一個由控制器管理的Animation對象。

下圖顯示了basic_staggered_animation示例中使用的間隔。 您可能會注意到以下特征：

• 不透明度在時間軸的前10％期間發生變化。
• 不透明度的變化與寬度的變化之間存在微小的差距。
• 在最后25％的時間線中沒有任何動畫。
• 增加填充使小部件看起來向上。
• 將邊框半徑增加到0.5，將帶圓角的方形轉換為圓形。
• 填充和邊界半徑變化發生在相同的精確間隔期間，但它們不必。

StaggeredAnimationIntervals.png

要設置動畫：

• 創建一個管理所有動畫的AnimationController。
• 為每個動畫屬性創建一個Tween。
  • Tween定義了一系列值。
  • Tween的animate方法需要parent控制器，并為該屬性生成一個Animation。
• 在動畫curve屬性上指定間隔。

當控制動畫的值更改時，新動畫的值會更改，從而觸發UI更新。

以下代碼為width屬性創建補間。 它構建一個CurvedAnimation ，指定一個緩和的曲線。 有關其他可用的預定義動畫曲線，請參閱曲線。

width = Tween<double>( begin: 50.0, end: 150.0, ).animate( CurvedAnimation( parent: controller, curve: Interval( 0.125, 0.250, curve: Curves.ease, ), ), ), 

begin 和 end 的值不必是雙倍的。下面的代碼使用BorderRadius.circular()為borderRadius屬性（控制方塊角的圓度）構建補間。

borderRadius = BorderRadiusTween( begin: BorderRadius.circular(4.0), end: BorderRadius.circular(75.0), ).animate( CurvedAnimation( parent: controller, curve: Interval( 0.375, 0.500, curve: Curves.ease, ), ), ), 

完成交錯的動畫

與所有交互式小部件一樣，完整的動畫由小部件對組成：無狀態小部件和有狀態小部件。

無狀態窗口小部件指定補間，定義Animation對象，并提供build()函數，負責構建窗口小部件樹的動畫部分。

有狀態小部件創建控制器，播放動畫，并構建小部件樹的非動畫部分。 在屏幕中的任何位置檢測到點擊時，動畫開始。

basic_staggered_animation’s main.dart的完整代碼

無狀態小部件：StaggerAnimation

在無狀態小部件StaggerAnimation中， build()函數實例化一個AnimatedBuilder - 一個用于構建動畫的通用小部件。 AnimatedBuilder構建一個小部件并使用Tweens的當前值配置它。 該示例創建一個名為_buildAnimation()的函數（執行實際的UI更新），并將其分配給其builder屬性。 AnimatedBuilder監聽來自動畫控制器的通知，在值發生變化時將小部件樹標記為臟。 對于動畫的每個刻度，值都會更新，從而調用_buildAnimation() 。

class StaggerAnimation extends StatelessWidget { StaggerAnimation({ Key key, this.controller }) :// Each animation defined here transforms its value during the subset // of the controller's duration defined by the animation's interval. // For example the opacity animation transforms its value during // the first 10% of the controller's duration.opacity = Tween<double>( begin: 0.0, end: 1.0, ).animate( CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.100, curve: Curves.ease, ), ), ),// ... Other tween definitions ...super(key: key);final Animation<double> controller; final Animation<double> opacity; final Animation<double> width; final Animation<double> height; final Animation<EdgeInsets> padding; final Animation<BorderRadius> borderRadius; final Animation<Color> color;// This function is called each time the controller "ticks" a new frame. // When it runs, all of the animation's values will have been // updated to reflect the controller's current value. Widget _buildAnimation(BuildContext context, Widget child) { return Container( padding: padding.value, alignment: Alignment.bottomCenter, child: Opacity( opacity: opacity.value, child: Container( width: width.value, height: height.value, decoration: BoxDecoration( color: color.value, border: Border.all( color: Colors.indigo[300], width: 3.0, ), borderRadius: borderRadius.value, ), ), ), ); }@override Widget build(BuildContext context) { return AnimatedBuilder( builder: _buildAnimation, animation: controller, ); } } 

有狀態小部件：StaggerDemo

有狀態小部件StaggerDemo創建了AnimationController（規定他們的對象），指定持續時間為2000毫秒。 它播放動畫，并構建小部件樹的非動畫部分。 在屏幕中檢測到點擊時動畫開始。 動畫向前，然后向后。

class StaggerDemo extends StatefulWidget { @override _StaggerDemoState createState() => _StaggerDemoState(); }class _StaggerDemoState extends State<StaggerDemo> with TickerProviderStateMixin { AnimationController _controller;@override void initState() { super.initState();_controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this ); }// ...Boilerplate...Future<Null> _playAnimation() async { try { await _controller.forward().orCancel; await _controller.reverse().orCancel; } on TickerCanceled { // the animation got canceled, probably because we were disposed } }@override Widget build(BuildContext context) { timeDilation = 10.0; // 1.0 is normal animation speed. return Scaffold( appBar: AppBar( title: const Text('Staggered Animation'), ), body: GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { _playAnimation(); }, child: Center( child: Container( width: 300.0, height: 300.0, decoration: BoxDecoration( color: Colors.black.withOpacity(0.1), border: Border.all( color:Colors.black.withOpacity(0.5), ), ), child: StaggerAnimation( controller: _controller.view ), ), ), ), ); } } 

資源

編寫動畫時，以下資源可能會有所幫助：

Animations landing page

列出Flutter動畫的可用文檔。 如果補間對您來說不熟悉，請查看動畫教程 。

Flutter API documentation

所有Flutter庫的參考文檔。 特別是，請參閱動畫庫文檔。

Flutter Gallery

演示應用程序展示了許多材料組件和其他Flutter功能。 Shrine demo實現了英雄動畫。

Material motion spec

描述材料應用的動作。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/17764.html