Flutter為跨平臺(tái)應(yīng)用程序提供了出色的動(dòng)畫支持。本文探討了一種新的非常規(guī)方法，它是一種向應(yīng)用程序添加動(dòng)畫的簡便方法。這些新的“動(dòng)畫和運(yùn)動(dòng)”小部件到底是什么？我們?nèi)绾问褂盟鼈儊硖砑雍唵魏蛷?fù)雜的動(dòng)畫？

Flutter是一個(gè)跨平臺(tái)框架，在過去兩年中已經(jīng)成熟，包括Web和桌面支持。它開發(fā)的應(yīng)用程序流暢且美觀，因此贏得了聲譽(yù)。憑借其豐富的動(dòng)畫支持，聲明性的UI編寫方式，“熱重載”以及其他功能，它現(xiàn)已成為一個(gè)完整的跨平臺(tái)框架。

如果您是從Flutter開始的，并且想學(xué)習(xí)一種非常規(guī)的添加動(dòng)畫的方法，那么您來對(duì)地方了：我們將探索動(dòng)畫和運(yùn)動(dòng)小部件的領(lǐng)域，這是一種添加動(dòng)畫的隱式方法。

Flutter基于小部件的概念。應(yīng)用程序的每個(gè)可視組件都是一個(gè)小部件-將其視為Android中的視圖。Flutter使用Animation類，用于管理的“ AnimationController”對(duì)象和用于插值數(shù)據(jù)范圍的“ Tween”來提供動(dòng)畫支持。這三個(gè)組件協(xié)同工作以提供流暢的動(dòng)畫。由于這需要手動(dòng)創(chuàng)建和管理動(dòng)畫，因此被稱為動(dòng)畫的一種顯式方式。

現(xiàn)在，讓我向您介紹動(dòng)畫和運(yùn)動(dòng)小部件。Flutter提供了許多固有支持動(dòng)畫的小部件。無需創(chuàng)建動(dòng)畫對(duì)象或任何控制器，因?yàn)樗袆?dòng)畫均由此類小部件處理。只需為所需的動(dòng)畫選擇適當(dāng)?shù)男〔考缓髮⑵鋵傩灾祩鬟f給動(dòng)畫即可。該技術(shù)是一種隱式動(dòng)畫方法。

上面的圖表大致列出了Flutter中的動(dòng)畫層次，以及如何同時(shí)支持顯式和隱式動(dòng)畫。

本文介紹的一些動(dòng)畫小部件包括：

AnimatedOpacity

AnimatedCrossFade

AnimatedAlign

AnimatedPadding

AnimatedSize

AnimatedPositioned。

Flutter不僅提供了預(yù)定義的動(dòng)畫小部件，還提供了名為的通用小部件AnimatedWidget，可用于創(chuàng)建自定義的隱式動(dòng)畫小部件。從名稱可以明顯看出，這些小部件屬于“動(dòng)畫”和“運(yùn)動(dòng)”小部件類別，因此它們具有一些共同的屬性，這些屬性使我們能夠使動(dòng)畫更加平滑和美觀。

現(xiàn)在讓我解釋這些通用屬性，因?yàn)樯院髮⒃谒惺纠惺褂盟鼈儭?/p>

duration

設(shè)置參數(shù)動(dòng)畫的持續(xù)時(shí)間。

reverseDuration

反向動(dòng)畫的持續(xù)時(shí)間。

curve

設(shè)置參數(shù)動(dòng)畫時(shí)要應(yīng)用的曲線。內(nèi)插值可以從線性分布中獲取，或者，如果指定的話，也可以從曲線中獲取。

讓我們通過創(chuàng)建一個(gè)簡單的應(yīng)用程序（稱為“已報(bào)價(jià)”）開始旅程。每次應(yīng)用啟動(dòng)時(shí)，它將顯示隨機(jī)報(bào)價(jià)。需要注意的兩件事：首先，所有這些報(bào)價(jià)都將在應(yīng)用程序中進(jìn)行硬編碼。其次，不會(huì)保存任何用戶數(shù)據(jù)。