Flutter 動畫(huà)

動畫(huà)類型

動畫(huà)分爲兩類：基于tween或基于物理(lǐ)的。以下(xià)部分解釋了(le)這(zhè)些(xiē)術語的含義，并列出了(le)一些(xiē)相關的資源。 在一些(xiē)情況下(xià)，我們最好(hǎo)的文(wén)檔就是Flutter gallery中的示例代碼。

補間(Tween)動畫(huà)

“介于兩者之間”的簡稱。在補間動畫(huà)中，定義了(le)開(kāi)始點和(hé)結束點、時(shí)間線以及定義轉換時(shí)間和(hé)速度的曲線。然後由框架計(jì)算(suàn)如何從(cóng)開(kāi)始點過渡到(dào)結束點。

上(shàng)面列出的文(wén)檔Flutter動畫(huà)教程 并不是專門(mén)介紹補間動畫(huà)的，但(dàn)在其示例中使用(yòng)了(le)補間動畫(huà)。

基于物理(lǐ)的動畫(huà)

在基于物理(lǐ)的動畫(huà)中，運動被模拟爲與真實世界的行爲相似。例如，當你(nǐ)擲球時(shí)，它在何處落地，取決于抛球速度有多快(kuài)、球有多重、距離地面有多遠。 類似地，将連接在彈簧上(shàng)的球落下(xià)（并彈起）與連接到(dào)繩子上(shàng)的球放(fàng)下(xià)的方式也(yě)是不同。

Flutter Gallery在 Material Components , Grid 示例中演示了(le)一個動畫(huà)。從(cóng)網格中選擇其中一個圖像并放(fàng)大(dà)，然後您可以甩手或拖動平移圖像。

另外(wài)請(qǐng)參閱 AnimationController.animateWith 和(hé) SpringSimulation的文(wén)檔

常見的動畫(huà)模式

大(dà)多數UX或交互設計(jì)師發現(xiàn)在設計(jì)UI時(shí)有一些(xiē)會(huì)經常使用(yòng)的動畫(huà)模式。本節列出了(le)一些(xiē)常用(yòng)的動畫(huà)模式，并告訴您可以在哪裏了(le)解更多。

動畫(huà)列表或網格

此模式涉及在網格或列表中添加或删除元素時(shí)應用(yòng)動畫(huà)。

AnimatedList 示例此演示來(lái)自(zì)示例程序目錄，演示如何将元素添加到(dào)列表或删除選定元素。 在用(yòng)戶使用(yòng)加号（+）和(hé)減号（ - ）按鈕時(shí)修該并同步列表。

共享元素轉換

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

Hero 動畫(huà)如何創建兩種風(fēng)格的 Hero 動畫(huà)：在改變位置和(hé)大(dà)小(xiǎo)的同時(shí)，hero從(cóng)一頁飛(fēi)到(dào)另一頁hero的邊界從(cóng)一個圓形變成一個正方形，同時(shí)它從(cóng)一個頁面飛(fēi)到(dào)另一個頁面

Flutter Gallery 您可以自(zì)己構建Gallery應用(yòng)程序，也(yě)可以從(cóng)Play商店(diàn)下(xià)載(中國不行)。 其中 Shrine演示了(le)包括hero動畫(huà)的一個例子。

另外(wài)請(qǐng)參閱 Hero, Navigator 和(hé) PageRoute 類的API文(wén)檔。

交錯動畫(huà)

動畫(huà)被分解爲較小(xiǎo)的動作(zuò)，其中一些(xiē)動作(zuò)被延遲。較小(xiǎo)的動畫(huà)可以是連續的，或者可以部分或完全重疊。

交錯動畫(huà)（Staggered Animations） this doc is new! NEW

其它資源

在以下(xià)鏈接中了(le)解更多關于Flutter動畫(huà)的信息：

動畫(huà): 技術概述查看(kàn)動畫(huà)庫中的一些(xiē)主要類，以及Flutter的動畫(huà)架構。

動畫(huà)和(hé)運動（Motion） WidgetsFlutter提供的一些(xiē)動畫(huà)widget的目錄