Flutter-PositionedTransition位置變化動畫

1） PositionedTransition 是AnimatedWidget的子類，跟AnimatedBuilder一樣。主要是為了在使用動畫的過程中減少不必要的Widget對象的創(chuàng)建工作，提高效率。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、曲周網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為曲周等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

2）該類持有了一個AnimationRelativeRect的引用rect

3）在build構(gòu)建widget的時候使用了動畫rect.value，在這里這個value就是RelativeRect對象。

那么這個RelativeRect對象是什么呢？在回答這個問題之前先來看看官方文檔給的例子，通過這個視頻可以看出PositionedTranstion是用來干嘛的。

width="560" height="315" src=" " allowfullscreen=""

顯而易見，PositionedTranstion通過一個特定的動畫AnimationRelativeRect將Widget的位置從動畫的生命周期的起始位置移到結(jié)束位置。而這個位置信息就是RelativeRect來表示，Relative相對的意思，相對誰？相對于某個Widget，而不是相對于坐標(biāo)原點(diǎn)。 RelativeRect 有四個屬性：

所以如果我們想讓一個widget的位置（上下左右）距離RelativeRect都是100的話，就要這么寫：

flutter-動畫

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

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

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

flutter動畫分為兩類：

常見動畫模式：

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

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

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

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

curve:描述動畫的曲線過程。

curvedAnimation:指定動畫的曲線。

常用Curve：

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

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

Tween.animate:返回一個Animation。

映射過程：

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

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

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

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

防止屏幕外動畫消耗資源。

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

過程：

回調(diào)：

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

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

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

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

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

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

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

自定義：PageRouteBuilder

1.要創(chuàng)建交織動畫，需要使用多個動畫對象（Animation）。

2.一個AnimationController控制所有的動畫對象。

3.給每一個動畫對象指定時間間隔（Interval）

可以同時對其新、舊子元素添加顯示、隱藏動畫.

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

希望大家支持一下，感謝

flutter-實(shí)現(xiàn)一個簡單的展開收起動畫

使用Tween動畫,改變控件距左距離

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

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

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

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

video for youtube

video for qiniu

apk download

github

本文標(biāo)題：flutter動漫,flutter 動畫庫
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article17/dseoigj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、微信小程序、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)