iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0

前言
我們平常手機拍攝的視訊,看起來雖然是一個連續播放的視訊,但其實他是由一連串的圖片組成的。動畫的核心是Animation類別,而Animation是由AnimationController管理,並經由Listeners和StatusListeners管理一切的變化。

Animation
Animation是Flutter動畫中的使用最多的類型,它知道動畫目前的狀態(開始、停止、移動、前進、方向、播放、回放),但不知道在螢幕上畫的是什麼。Animation在一段時間內會依次產生一個區間值,它的輸出值可以是線性或非線性的,也可以是一個步進函數或其他曲線函數。

Animatable
用於控制動畫類型,透過呼叫animate方法,回傳一個Animation。例如在顏色動畫中,我們最關心色值的變化,這時就可以透過Animatable控制色值的變化。

AnimationController
AnimationController是Animation的子類,為一個動畫控制器,控制動畫的播放狀態,它負責在指定的時間內以線性的方式產生區間為(0.0,1.0)的數字,此數字和屏幕刷新有關。如要啟動動畫,則需要透過AnimationController的forward( )方法。

Tween
Tween是補間動畫,只需要設定開始和結束的邊界值,上述提到AnimationController設定的值範圍是(0.0,1.0),但當我們需要不同的範圍或類別時,就需要使用到Tween。

Curve
Flutter透過曲線來描述動畫,整個動畫可以是勻速、加速、先加速後減速等等。

今天介紹一些基本的動畫類型,明天將會介紹動畫的封裝與簡化,敬請期待。

參考資料
橫跨Android及Apple的神話:用Dart語言神啟Flutter大業5.1節
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/747535/
https://iter01.com/611578.html


上一篇
Day 17手勢識別GestureDectector
下一篇
Day 19動畫的封裝與簡化
系列文
一起學Flutter,和我變Better!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言