flutter-動(dòng)畫

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

創(chuàng)新互聯(lián)公司是專業(yè)的加格達(dá)奇網(wǎng)站建設(shè)公司，加格達(dá)奇接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行加格達(dá)奇網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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動(dòng)畫 --- 平移/旋轉(zhuǎn)/縮放/漸變

在Flutter中Widget動(dòng)畫的核心類有下面這些：

Animation：動(dòng)畫庫中的一個(gè)核心類，它生成指導(dǎo)動(dòng)畫的值；

CurvedAnimation：將動(dòng)畫過程抽象為一個(gè)非線性曲線；

AnimationController：用來管理管理動(dòng)畫，常用的方法有forward()：?jiǎn)?dòng)動(dòng)畫；reverse({double from}：倒放動(dòng)畫；reset()：重置動(dòng)畫，將其設(shè)置到動(dòng)畫的開始位置；stop({ bool canceled = true })：停止動(dòng)畫。

Tween：AnimationController對(duì)象的范圍從0.0到1.0。如果您需要不同的范圍或不同的數(shù)據(jù)類型，則可以使用Tween來配置動(dòng)畫以生成不同的范圍或數(shù)據(jù)類型的值。

Flutter 之 動(dòng)畫1

對(duì)動(dòng)畫系統(tǒng)而言，為了實(shí)現(xiàn)動(dòng)畫，它需要做三件事兒：1.確定畫面變化的規(guī)律；2.根據(jù)這個(gè)規(guī)律，設(shè)定動(dòng)畫周期，啟動(dòng)動(dòng)畫；3.定期獲取當(dāng)前動(dòng)畫的值，不斷地微調(diào)、重繪畫面。

這三件事情對(duì)應(yīng)到 Flutter 中，就是 Animation、AnimationController 與 Listener：

1.Animation 是 Flutter 動(dòng)畫庫中的核心類，會(huì)根據(jù)預(yù)定規(guī)則，在單位時(shí)間內(nèi)持續(xù)輸出動(dòng)畫的當(dāng)前狀態(tài)。Animation 知道當(dāng)前動(dòng)畫的狀態(tài)（比如，動(dòng)畫是否開始、停止、前進(jìn)或者后退，以及動(dòng)畫的當(dāng)前值），但卻不知道這些狀態(tài)究竟應(yīng)用在哪個(gè)組件對(duì)象上。換句話說，Animation 僅僅是用來提供動(dòng)畫數(shù)據(jù)，而不負(fù)責(zé)動(dòng)畫的渲染。

2.AnimationController 用于管理 Animation，可以用來設(shè)置動(dòng)畫的時(shí)長(zhǎng)、啟動(dòng)動(dòng)畫、暫停動(dòng)畫、反轉(zhuǎn)動(dòng)畫等。

3.Listener 是 Animation 的回調(diào)函數(shù)，用來監(jiān)聽動(dòng)畫的進(jìn)度變化，我們需要在這個(gè)回調(diào)函數(shù)中，根據(jù)動(dòng)畫的當(dāng)前值重新渲染組件，實(shí)現(xiàn)動(dòng)畫的渲染。

class NormalAnimateWidget extends StatefulWidget {

@override

StatecreateState()=_NormalAnimateState();

}

class _NormalAnimateState extends Statewith SingleTickerProviderStateMixin{

AnimationController?controller;

Animation?animation;

@override

void initState() {

// TODO: implement initState

super.initState();

/*

* AnimationController

AnimationController用于控制動(dòng)畫，它包含動(dòng)畫的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法。

* AnimationController會(huì)在動(dòng)畫的每一幀，就會(huì)生成一個(gè)新的值。

* 默認(rèn)情況下，AnimationController在給定的時(shí)間段內(nèi)線性的生成從 0.0 到1.0（默認(rèn)區(qū)間）的數(shù)字。

* */

/*Ticker

當(dāng)創(chuàng)建一個(gè)AnimationController時(shí)，需要傳遞一個(gè)vsync參數(shù)，

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

abstract class TickerProvider {

//通過一個(gè)回調(diào)創(chuàng)建一個(gè)Ticker

Ticker createTicker(TickerCallback onTick);

}

Flutter 應(yīng)用在啟動(dòng)時(shí)都會(huì)綁定一個(gè)SchedulerBinding，

通過SchedulerBinding可以給每一次屏幕刷新添加回調(diào)，

而Ticker就是通過SchedulerBinding來添加屏幕刷新回調(diào)，這樣一來，

每次屏幕刷新都會(huì)調(diào)用TickerCallback。

使用Ticker(而不是Timer)來驅(qū)動(dòng)動(dòng)畫會(huì)防止屏幕外動(dòng)畫（動(dòng)畫的UI不在當(dāng)前屏幕時(shí)，如鎖屏?xí)r）

消耗不必要的資源，因?yàn)镕lutter中屏幕刷新時(shí)會(huì)通知到綁定的SchedulerBinding，

而Ticker是受SchedulerBinding驅(qū)動(dòng)的，

由于鎖屏后屏幕會(huì)停止刷新，所以Ticker就不會(huì)再觸發(fā)。

*/

// 創(chuàng)建動(dòng)畫周期為1秒的AnimationController對(duì)象

controller =AnimationController(

vsync:this, duration:const Duration(milliseconds:3000));

/*

* Curve

* 動(dòng)畫過程可以是勻速的、勻加速的或者先加速后減速等。

* Flutter中通過Curve（曲線）來描述動(dòng)畫過程，

* 我們把勻速動(dòng)畫稱為線性的(Curves.linear)，而非勻速動(dòng)畫稱為非線性的。

* 我們可以通過CurvedAnimation來指定動(dòng)畫的曲線，如：

final CurvedAnimation curve =

CurvedAnimation(parent: controller, curve: Curves.easeIn);

*

Curves曲線 動(dòng)畫過程

linear 勻速的

decelerate 勻減速

ease 開始加速，后面減速

easeIn 開始慢，后面快

easeOut? 開始快，后面慢

easeInOut? 開始慢，然后加速，最后再減速

*

* 當(dāng)然我們也可以創(chuàng)建自己Curve，例如我們定義一個(gè)正弦曲線：

class ShakeCurve extends Curve {

@override

double transform(double t) {

return math.sin(t * math.PI * 2);

}

}

* */

final CurvedAnimation curve =CurvedAnimation(

parent:controller!, curve:Curves.linear);

/*

* Animation

*Animation是一個(gè)抽象類，它本身和UI渲染沒有任何關(guān)系，

* 而它主要的功能是保存動(dòng)畫的插值和狀態(tài)；其中一個(gè)比較常用的Animation類是Animation。

* Animation對(duì)象是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間(Tween)之間值的類。

* Animation對(duì)象在整個(gè)動(dòng)畫執(zhí)行過程中輸出的值可以是線性的、曲線的、一個(gè)步進(jìn)函數(shù)或者任何其他曲線函數(shù)等等，

* 這由Curve來決定。 根據(jù)Animation對(duì)象的控制方式，

* 動(dòng)畫可以正向運(yùn)行（從起始狀態(tài)開始，到終止?fàn)顟B(tài)結(jié)束），

* 也可以反向運(yùn)行，甚至可以在中間切換方向。

* Animation還可以生成除double之外的其他類型值

* ，如：Animation 或Animation。

* 在動(dòng)畫的每一幀中，我們可以通過Animation對(duì)象的value屬性獲取動(dòng)畫的當(dāng)前狀態(tài)值。

#動(dòng)畫通知

我們可以通過Animation來監(jiān)聽動(dòng)畫每一幀以及執(zhí)行狀態(tài)的變化，Animation有如下兩個(gè)方法：

addListener()；它可以用于給Animation添加幀監(jiān)聽器，

* 在每一幀都會(huì)被調(diào)用。

* 幀監(jiān)聽器中最常見的行為是改變狀態(tài)后調(diào)用setState()來觸發(fā)UI重建。

addStatusListener()；

* 它可以給Animation添加“動(dòng)畫狀態(tài)改變”監(jiān)聽器；

* 動(dòng)畫開始、結(jié)束、正向或反向（見AnimationStatus定義）時(shí)會(huì)調(diào)用狀態(tài)改變的監(jiān)聽器。

* */

// 創(chuàng)建從50到200線性變化的Animation對(duì)象

// 普通動(dòng)畫需要手動(dòng)監(jiān)聽動(dòng)畫狀態(tài)，刷新UI

animation =Tween(begin:10.0, end:200.0).animate(curve)

..addListener(()=setState((){}));

/*

* Tween

* 默認(rèn)情況下，AnimationController對(duì)象值的范圍是[0.0，1.0]。

* 如果我們需要構(gòu)建UI的動(dòng)畫值在不同的范圍或不同的數(shù)據(jù)類型，

* 則可以使用Tween來添加映射以生成不同的范圍或數(shù)據(jù)類型的值。

*Tween構(gòu)造函數(shù)需要begin和end兩個(gè)參數(shù)。

* Tween的唯一職責(zé)就是定義從輸入范圍到輸出范圍的映射。

* 輸入范圍通常為[0.0，1.0]，但這不是必須的，我們可以自定義需要的范圍。

* */

// 啟動(dòng)動(dòng)畫

controller!.repeat(reverse:true);

//

// 第二段

// animation!.addStatusListener((status) {

//? if (status == AnimationStatus.completed) {

//? ? controller!.reverse();// 動(dòng)畫結(jié)束時(shí)反向執(zhí)行

//? } else if (status == AnimationStatus.dismissed) {

//? ? controller!.forward();// 動(dòng)畫反向執(zhí)行完畢時(shí)，重新執(zhí)行

//? }

// });

// controller!.forward();// 啟動(dòng)動(dòng)畫

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home:Scaffold(

body:Center(

child:Container(

width:animation!.value,// 將動(dòng)畫的值賦給 widget 的寬高

? ? ? ? ? ? ? height:animation!.value,//

? ? ? ? ? ? ? child:FlutterLogo(),

)

)

)

);

}

@override

void dispose() {

// 釋放資源

controller!.dispose();

super.dispose();

}

}

Flutter組合動(dòng)畫

所有動(dòng)畫都由同一個(gè) AnimationController 驅(qū)動(dòng)，無論動(dòng)畫需要持續(xù)多長(zhǎng)時(shí)間，控制器的值必須在0.0到1.0之間，而每個(gè)動(dòng)畫的間隔（Interval）也必須介于0.0和1.0之間。對(duì)于在間隔中設(shè)置動(dòng)畫的每個(gè)屬性，需要分別創(chuàng)建一個(gè) Tween 用于指定該屬性的開始值和結(jié)束值。也就是說0.0到1.0代表整個(gè)動(dòng)畫過程，我們可以給不同動(dòng)畫指定不同的起始點(diǎn)和終止點(diǎn)來決定它們的開始時(shí)間和終止時(shí)間。

下面我們看一個(gè)例子，實(shí)現(xiàn)一個(gè)柱狀圖增長(zhǎng)的動(dòng)畫：

開始時(shí)高度從0增長(zhǎng)到300像素，同時(shí)顏色由綠色漸變?yōu)榧t色；這個(gè)過程占據(jù)整個(gè)動(dòng)畫時(shí)間的60%。

高度增長(zhǎng)到300后，開始沿X軸向右平移100像素；這個(gè)過程占用整個(gè)動(dòng)畫時(shí)間的40%。

分享標(biāo)題：flutter彈動(dòng)畫,flutter動(dòng)畫效果
本文URL：http://m.rwnh.cn/article20/dsdjejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、做網(wǎng)站、App開發(fā)、電子商務(wù)、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

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