Flutter 動畫

動畫類型

動畫分為兩類：基于tween或基于物理的。以下部分解釋了這些術(shù)語的含義，并列出了一些相關(guān)的資源。 在一些情況下，我們最好的文檔就是Flutter gallery中的示例代碼。

補(bǔ)間(Tween)動畫

“介于兩者之間”的簡稱。在補(bǔ)間動畫中，定義了開始點(diǎn)和結(jié)束點(diǎn)、時間線以及定義轉(zhuǎn)換時間和速度的曲線。然后由框架計算如何從開始點(diǎn)過渡到結(jié)束點(diǎn)。

上面列出的文檔Flutter動畫教程 并不是專門介紹補(bǔ)間動畫的，但在其示例中使用了補(bǔ)間動畫。

基于物理的動畫

在基于物理的動畫中，運(yùn)動被模擬為與真實世界的行為相似。例如，當(dāng)你擲球時，它在何處落地，取決于拋球速度有多快、球有多重、距離地面有多遠(yuǎn)。 類似地，將連接在彈簧上的球落下（并彈起）與連接到繩子上的球放下的方式也是不同。

• Flutter Gallery在 Material Components , Grid 示例中演示了一個動畫。從網(wǎng)格中選擇其中一個圖像并放大，然后您可以甩手或拖動平移圖像。
• 另外請參閱 AnimationController.animateWith 和 SpringSimulation的文檔

常見的動畫模式

大多數(shù)UX或交互設(shè)計師發(fā)現(xiàn)在設(shè)計UI時有一些會經(jīng)常使用的動畫模式。本節(jié)列出了一些常用的動畫模式，并告訴您可以在哪里了解更多。

動畫列表或網(wǎng)格

此模式涉及在網(wǎng)格或列表中添加或刪除元素時應(yīng)用動畫。

• AnimatedList 示例此演示來自示例程序目錄，演示如何將元素添加到列表或刪除選定元素。 在用戶使用加號（+）和減號（ - ）按鈕時修該并同步列表。

共享元素轉(zhuǎn)換

在這種模式中，用戶從頁面中選擇一個元素（通常是一個圖像），然后打開所選元素的詳情頁面，在打開詳情頁時使用動畫。 在Flutter中，您可以使用Hero widget 輕松實現(xiàn)路由（頁面）之間的共享元素過渡動畫。

• Hero 動畫如何創(chuàng)建兩種風(fēng)格的 Hero 動畫：在改變位置和大小的同時，hero從一頁飛到另一頁hero的邊界從一個圓形變成一個正方形，同時它從一個頁面飛到另一個頁面
• Flutter Gallery 您可以自己構(gòu)建Gallery應(yīng)用程序，也可以從Play商店下載(中國不行)。 其中 Shrine演示了包括hero動畫的一個例子。
• 另外請參閱 Hero, Navigator 和 PageRoute 類的API文檔。

交錯動畫

動畫被分解為較小的動作，其中一些動作被延遲。較小的動畫可以是連續(xù)的，或者可以部分或完全重疊。

• 交錯動畫（Staggered Animations）  NEW

其它資源

在以下鏈接中了解更多關(guān)于Flutter動畫的信息：

• 動畫: 技術(shù)概述查看動畫庫中的一些主要類，以及Flutter的動畫架構(gòu)。
• 動畫和運(yùn)動（Motion） WidgetsFlutter提供的一些動畫widget的目錄