Flutter 動畫(huà)

動畫(huà)類型

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

補間(jiān)(Tween)動畫(huà)

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

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

基于物(wù)理的動畫(huà)

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

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

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

常見(jiàn)的動畫(huà)模式

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

動畫(huà)列表或網格

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

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

共享元素轉換

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

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

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

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

交錯動畫(huà)

動畫(huà)被分解為(wèi)較小的動作(zuò)，其中一(yī)些動作(zuò)被延遲。較小的動畫(huà)可(kě)以是連續的，或者可(kě)以部分或完全重疊。

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

其它資源

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

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

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