TweenAnimationBuilder 說明

當(dāng)我們想創(chuàng)建一個(gè)自定義的隱式動(dòng)畫時(shí)，我們可以使用TweenAnimationBuilder.

成都創(chuàng)新互聯(lián)公司云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、資陽服務(wù)器托管、云服務(wù)器、虛擬主機(jī)、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬主機(jī)、域名與空間、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

中文說明

假設(shè)你想創(chuàng)建一個(gè)基礎(chǔ)的動(dòng)畫，這個(gè)動(dòng)畫不會(huì)永遠(yuǎn)重復(fù)。它僅僅是一個(gè)組件或則一個(gè)組件樹。Flutter有一個(gè)慣例，將其隱式動(dòng)畫小部件命名為AnimatedFoo。

tween 設(shè)置動(dòng)畫的值。開始xxx 結(jié)束xxx

builder: 第一個(gè)參數(shù)是BuildContext,第二個(gè)是value取決于你要設(shè)置的動(dòng)畫數(shù)據(jù)。第三個(gè)參數(shù)子組件，用于優(yōu)化.

同時(shí)還可以設(shè)置運(yùn)動(dòng)曲線 curve。

onEnd監(jiān)聽，可以在動(dòng)畫完成時(shí)，進(jìn)行下一步動(dòng)作

設(shè)置子Widget參數(shù)時(shí)潛在性能的優(yōu)化。意思是說

builder中的child可以提前構(gòu)建。以參數(shù)的方式傳遞盡力啊。flutter會(huì)自動(dòng)唯一的小部件是什么，它將會(huì)需要逐幀重建新的內(nèi)容。而不是其實(shí)圖像的本身。（如果時(shí)小的組件，沒啥必要，但是如果是巨大的動(dòng)畫。作用應(yīng)該會(huì)很明顯）

Flutter上線項(xiàng)目實(shí)戰(zhàn)——Vap視頻動(dòng)畫

透明視頻動(dòng)畫是目前比較流行的實(shí)現(xiàn)動(dòng)畫的一種, 大廠也相繼開源自己的框架，最終我們選中 騰訊vap ，它支持了Android、IOS、Web，為我們封裝flutter_vap提供了天然的便利，并且它提供了將幀圖片生成帶alpha通道視頻的工具，這簡(jiǎn)直太贊了。

VAP（Video Animation Player）是企鵝電競(jìng)開發(fā)，用于播放酷炫動(dòng)畫的實(shí)現(xiàn)方案。

video for youtube

video for qiniu

apk download

github

flutter-動(dòng)畫

1.動(dòng)畫原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀，由于人眼會(huì)產(chǎn)生視覺暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫。

UI的一次改變稱為一個(gè)動(dòng)畫幀，對(duì)應(yīng)一次屏幕刷新。

FPS：幀率，每秒的動(dòng)畫幀數(shù)。

flutter動(dòng)畫分為兩類：

常見動(dòng)畫模式：

是一個(gè)抽象類，主要的功能是保存動(dòng)畫的值和狀態(tài)。常用的一個(gè)Animation類是Animation double ,是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間之間的值的類，可以是線性或者曲線或者其他。

可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。

是一個(gè)動(dòng)畫控制器，控制動(dòng)畫的播放狀態(tài)，在屏幕刷新的每一幀，就會(huì)生成一個(gè)新的值。

包含動(dòng)畫的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法，在給定的時(shí)間段內(nèi)線性的生成從0.0到1.0（默認(rèn)區(qū)間）的數(shù)字。

curve:描述動(dòng)畫的曲線過程。

curvedAnimation:指定動(dòng)畫的曲線。

常用Curve：

繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。

例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。

Tween.animate:返回一個(gè)Animation。

映射過程：

1). Tween.animation通過傳入 aniamtionController 獲得一個(gè)_AnimatedEvaluation 類型的 animation 對(duì)象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對(duì)象傳入了 _AnimatedEvaluation 對(duì)象。

2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對(duì)象和 AnimationController 對(duì)象。

3). 這里的 animation 其實(shí)就是前面的 AnimationController 對(duì)象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個(gè) 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。

接收一個(gè)TickerProvider類型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker。

防止屏幕外動(dòng)畫消耗資源。

[圖片上傳失敗...(image-115b94-1636441483468)]

過程：

回調(diào)：

不使用addListener()和setState()來給widget添加動(dòng)畫。

使用AnimatedWidget，將widget分離出來，創(chuàng)建一個(gè)可重用動(dòng)畫的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染過渡，把渲染過程也抽象出來：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平臺(tái)風(fēng)格一致的路由切換動(dòng)畫

CupertinoPageRoute：左右切換風(fēng)格

自定義：PageRouteBuilder

1.要?jiǎng)?chuàng)建交織動(dòng)畫，需要使用多個(gè)動(dòng)畫對(duì)象（Animation）。

2.一個(gè)AnimationController控制所有的動(dòng)畫對(duì)象。

3.給每一個(gè)動(dòng)畫對(duì)象指定時(shí)間間隔（Interval）

可以同時(shí)對(duì)其新、舊子元素添加顯示、隱藏動(dòng)畫.

當(dāng)AnimatedSwitcher的child發(fā)生變化時(shí)（類型或Key不同），舊child會(huì)執(zhí)行隱藏動(dòng)畫，新child會(huì)執(zhí)行執(zhí)行顯示動(dòng)畫。

希望大家支持一下，感謝

flutter-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的展開收起動(dòng)畫

使用Tween動(dòng)畫,改變控件距左距離

展開時(shí),展示菜單控件,動(dòng)畫正向執(zhí)行;收起后,動(dòng)畫反向執(zhí)行,隱藏菜單控件;