flutter中的動畫(tween動畫)

2021-09-21 06:37:17 字數 1498 閱讀 5699

flutter中的動畫分為兩類:基於tween的動畫和以及物理的動畫。

以下引用自flutterchina:

補間(tween)動畫

「介於兩者之間」的簡稱。在補間動畫中,定義了開始點和結束點、時間線以及定義轉換時間和速度的曲線。然後由框架計算如何從開始點過渡到結束點。

基於物理的動畫

在基於物理的動畫中,運動被模擬為與真實世界的行為相似。例如,當你擲球時,它在何處落地,取決於拋球速度有多快、球有多重、距離地面有多遠。 類似地,將連線在彈簧上的球落下(並彈起)與連線到繩子上的球放下的方式也是不同。

主要的類的介紹:

animation 物件,是 flutter 動畫庫中的核心類,插入用於引導動畫的值。

animation 物件知道當前動畫的狀態(如:動畫是否開始,停止,前進或者後退),但對螢幕上顯示的內容一無所知。

animationcontroller 物件管理著 animation。

curvedanimation 將動畫定義成非線性運動的動畫。

tween 在被動畫物件使用的資料範圍之間進行插值。例如,tween 可能會定義從紅色到藍色或從 0 到 255 的插值。

使用 listeners 和 statuslisteners 來監聽動畫狀態的變化。

(《主要類的介紹》引用自

以下**展示了tween動畫的實現:

class testanimation extends statefulwidget 

}class _testanimationstate extends statewith singletickerproviderstatemixin );

});//提供方法 為動畫新增狀態監聽

animation.addstatuslistener((animationstatus state) );

});} //重寫生命週期的dispose函式 將controller資源**

@override

void dispose()

//build方法 返回頁面的布局widget

@override

widget build(buildcontext context) ,

child: text("開始"),

),text("動畫狀態:" + animationstatus.tostring()),

text("動畫值:" + animationvalue.tostring()),

container(

height: animation.value,

width: animation.value,

child: flutterlogo(),)],

),);

}}

實現效果截圖:

Flutter 動畫使用

效果預覽 旋轉動畫 透明度變換動畫 在android中,可以通過view.animate 對檢視進行動畫處理,那在flutter中怎樣才能對widget進行處理 在flutter中,可以通過動畫庫給widget新增動畫。在android中,您可以通過xml建立動畫或在檢視上呼叫.animate 在f...

Flutter 動畫使用

旋轉動畫 透明度變換動畫 在android中,可以通過view.animate 對檢視進行動畫處理,那在flutter中怎樣才能對widget進行處理 在flutter中,可以通過動畫庫給widget新增動畫。在android中,您可以通過xml建立動畫或在檢視上呼叫.animate 在flutte...

Flutter 動畫入門

flutter動畫基本與前端動畫一致,都是在一定時間內,將乙個值變到另乙個值,利用這個值的變化來實現對介面的控制。class myhomepage extends statefulwidget super key key override myhomepagestate createstate my...