1.動畫原理:在一段時間內快速的多次改變UI外觀,由于人眼會產生視覺暫留所以最終看到的就是一個連續的動畫。
創新互聯公司為客戶提供專業的成都網站設計、成都網站建設、外貿網站建設、程序、域名、空間一條龍服務,提供基于WEB的系統開發. 服務項目涵蓋了網頁設計、網站程序開發、WEB系統開發、微信二次開發、移動網站建設等網站方面業務。
UI的一次改變稱為一個動畫幀,對應一次屏幕刷新。
FPS:幀率,每秒的動畫幀數。
flutter動畫分為兩類:
常見動畫模式:
是一個抽象類,主要的功能是保存動畫的值和狀態。常用的一個Animation類是Animation double ,是一個在一段時間內依次生成一個區間之間的值的類,可以是線性或者曲線或者其他。
可以生成除double之外的其他類型值,如:Animation Color 或 Animation Size 。
是一個動畫控制器,控制動畫的播放狀態,在屏幕刷新的每一幀,就會生成一個新的值。
包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法,在給定的時間段內線性的生成從0.0到1.0(默認區間)的數字。
curve:描述動畫的曲線過程。
curvedAnimation:指定動畫的曲線。
常用Curve:
繼承自Animatable T ,表示的就是一個 Animation 對象的取值范圍,只需要設置開始和結束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如,Tween可能會生成從紅到藍之間的色值,或者從0到255。
Tween.animate:返回一個Animation。
映射過程:
1). Tween.animation通過傳入 aniamtionController 獲得一個_AnimatedEvaluation 類型的 animation 對象(基類為 Animation), 并且將 aniamtionController 和 Tween 對象傳入了 _AnimatedEvaluation 對象。
2). animation.value方法即是調用 _evaluatable.evaluate(parent)方法, 而 _evaluatable 和 parent 分別為 Tween 對象和 AnimationController 對象。
3). 這里的 animation 其實就是前面的 AnimationController 對象, transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個 0.0~1.0 的值被映射到了 begin 和 end 范圍內了。
接收一個TickerProvider類型的對象,它的主要職責是創建Ticker。
防止屏幕外動畫消耗資源。
[圖片上傳失敗...(image-115b94-1636441483468)]
過程:
回調:
不使用addListener()和setState()來給widget添加動畫。
使用AnimatedWidget,將widget分離出來,創建一個可重用動畫的widget,AnimatedWidget中會自動調用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過渡,把渲染過程也抽象出來:
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute:平臺風格一致的路由切換動畫
CupertinoPageRoute:左右切換風格
自定義:PageRouteBuilder
1.要創建交織動畫,需要使用多個動畫對象(Animation)。
2.一個AnimationController控制所有的動畫對象。
3.給每一個動畫對象指定時間間隔(Interval)
可以同時對其新、舊子元素添加顯示、隱藏動畫.
當AnimatedSwitcher的child發生變化時(類型或Key不同),舊child會執行隱藏動畫,新child會執行執行顯示動畫。
希望大家支持一下,感謝
1、數值型-Number
2、布爾型-Boolean
3、字符串-String
4、列表-List
5、鍵值對-Map
1、int: 整數,數值
2、double: 浮點型數值,帶有小數點
運算符:+,-,*,/,~/(取整),%;
字符串操作
運算符:+,*,==,[]
插值表達式:${expression}
常用屬性:length,isEmpty(是否為空)
Map 對象
Flutter有生成構造函數、默認構造函數、命名構造函數、重定向構造函數、常量構造函數、工廠構造函數
生成構造函數是最常見的構造函數,即生成實體類對象。
如果未聲明構造函數,則會提供默認構造函數。 默認構造函數沒有參數,并調用父類無參數構造函數。
默認情況下,子類中的構造函數調用父類的未命名無參數構造函數。 父類的構造函數在子類構造函數體的開頭被調用。 如果還使用初始化了列表,則會在調用父類構造函數之前執行。 執行順序如下:
如果父類沒有未命名的無參數構造函數,則必須手動調用父類中的一個構造函數。 在子類的構造函數體之后用冒號(:)指定父類構造函數
當需要定義一個有特別含義的構造函數的時候,可以通過命名構造 形式:構造函數.XXX來命名構造函數
有時構造函數需要重定向到同一個類中的另一個構造函數,在冒號后面用this:
如果你的類需要成為永遠不會更改的對象,則可以使這些對象成為編譯時常量。 定義const構造函數要確保所有實例變量都是final。
不用直接創建對象(可以通過調用其他構造函數創建)