Flutter 動(dòng)畫

動(dòng)畫類型

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

補(bǔ)間(Tween)動(dòng)畫

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

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

基于物理的動(dòng)畫

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

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

常見(jiàn)的動(dòng)畫模式

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

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

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

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

共享元素轉(zhuǎn)換

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

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

交錯(cuò)動(dòng)畫

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

• 交錯(cuò)動(dòng)畫（Staggered Animations）  NEW

其它資源

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

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