建站
咨詢
售后
建站咨詢
新聞中心
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)、重繪畫面。
創(chuàng)新互聯(lián)公司服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過(guò)十多年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。
這三件事情對(duì)應(yīng)到 Flutter 中，就是 Animation、AnimationController 與 Listener：
1.Animation 是 Flutter 動(dòng)畫庫(kù)中的核心類，會(huì)根據(jù)預(yù)定規(guī)則，在單位時(shí)間內(nèi)持續(xù)輸出動(dòng)畫的當(dāng)前狀態(tài)。Animation 知道當(dāng)前動(dòng)畫的狀態(tài)（比如，動(dòng)畫是否開(kāi)始、停止、前進(jìn)或者后退，以及動(dòng)畫的當(dāng)前值），但卻不知道這些狀態(tài)究竟應(yīng)用在哪個(gè)組件對(duì)象上。換句話說(shuō)，Animation 僅僅是用來(lái)提供動(dòng)畫數(shù)據(jù)，而不負(fù)責(zé)動(dòng)畫的渲染。
2.AnimationController 用于管理 Animation，可以用來(lái)設(shè)置動(dòng)畫的時(shí)長(zhǎng)、啟動(dòng)動(dòng)畫、暫停動(dòng)畫、反轉(zhuǎn)動(dòng)畫等。
3.Listener 是 Animation 的回調(diào)函數(shù)，用來(lái)監(jiān)聽(tīng)動(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 {
//通過(guò)一個(gè)回調(diào)創(chuàng)建一個(gè)Ticker
Ticker createTicker(TickerCallback onTick);
}
Flutter 應(yīng)用在啟動(dòng)時(shí)都會(huì)綁定一個(gè)SchedulerBinding，
通過(guò)SchedulerBinding可以給每一次屏幕刷新添加回調(diào)，
而Ticker就是通過(guò)SchedulerBinding來(lái)添加屏幕刷新回調(diào)，這樣一來(lái)，
每次屏幕刷新都會(huì)調(diào)用TickerCallback。
使用Ticker(而不是Timer)來(lái)驅(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)畫過(guò)程可以是勻速的、勻加速的或者先加速后減速等。
* Flutter中通過(guò)Curve（曲線）來(lái)描述動(dòng)畫過(guò)程，
* 我們把勻速動(dòng)畫稱為線性的(Curves.linear)，而非勻速動(dòng)畫稱為非線性的。
* 我們可以通過(guò)CurvedAnimation來(lái)指定動(dòng)畫的曲線，如：
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
*
Curves曲線 動(dòng)畫過(guò)程
linear 勻速的
decelerate 勻減速
ease 開(kāi)始加速，后面減速
easeIn 開(kāi)始慢，后面快
easeOut? 開(kāi)始快，后面慢
easeInOut? 開(kāi)始慢，然后加速，最后再減速
*
* 當(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渲染沒(méi)有任何關(guān)系，
* 而它主要的功能是保存動(dòng)畫的插值和狀態(tài)；其中一個(gè)比較常用的Animation類是Animation。
* Animation對(duì)象是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間(Tween)之間值的類。
* Animation對(duì)象在整個(gè)動(dòng)畫執(zhí)行過(guò)程中輸出的值可以是線性的、曲線的、一個(gè)步進(jìn)函數(shù)或者任何其他曲線函數(shù)等等，
* 這由Curve來(lái)決定。 根據(jù)Animation對(duì)象的控制方式，
* 動(dòng)畫可以正向運(yùn)行（從起始狀態(tài)開(kāi)始，到終止?fàn)顟B(tài)結(jié)束），
* 也可以反向運(yùn)行，甚至可以在中間切換方向。
* Animation還可以生成除double之外的其他類型值
* ，如：Animation 或Animation。
* 在動(dòng)畫的每一幀中，我們可以通過(guò)Animation對(duì)象的value屬性獲取動(dòng)畫的當(dāng)前狀態(tài)值。
#動(dòng)畫通知
我們可以通過(guò)Animation來(lái)監(jiān)聽(tīng)動(dòng)畫每一幀以及執(zhí)行狀態(tài)的變化，Animation有如下兩個(gè)方法：
addListener()；它可以用于給Animation添加幀監(jiān)聽(tīng)器，
* 在每一幀都會(huì)被調(diào)用。
* 幀監(jiān)聽(tīng)器中最常見(jiàn)的行為是改變狀態(tài)后調(diào)用setState()來(lái)觸發(fā)UI重建。
addStatusListener()；
* 它可以給Animation添加“動(dòng)畫狀態(tài)改變”監(jiān)聽(tīng)器；
* 動(dòng)畫開(kāi)始、結(jié)束、正向或反向（見(jiàn)AnimationStatus定義）時(shí)會(huì)調(diào)用狀態(tài)改變的監(jiān)聽(tīng)器。
* */
// 創(chuàng)建從50到200線性變化的Animation對(duì)象
// 普通動(dòng)畫需要手動(dòng)監(jiān)聽(tīng)動(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來(lái)添加映射以生成不同的范圍或數(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)畫
1.動(dòng)畫原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀，由于人眼會(huì)產(chǎn)生視覺(jué)暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫。
UI的一次改變稱為一個(gè)動(dòng)畫幀，對(duì)應(yīng)一次屏幕刷新。
FPS：幀率，每秒的動(dòng)畫幀數(shù)。
flutter動(dòng)畫分為兩類：
常見(jiàn)動(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)畫的曲線過(guò)程。
curvedAnimation:指定動(dòng)畫的曲線。
常用Curve：
繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開(kāi)始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。
Tween.animate:返回一個(gè)Animation。
映射過(guò)程：
1). Tween.animation通過(guò)傳入 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)]
過(guò)程：
回調(diào)：
不使用addListener()和setState()來(lái)給widget添加動(dòng)畫。
使用AnimatedWidget，將widget分離出來(lái)，創(chuàng)建一個(gè)可重用動(dòng)畫的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過(guò)渡，把渲染過(guò)程也抽象出來(lái)：
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)單的展開(kāi)收起動(dòng)畫
使用Tween動(dòng)畫,改變控件距左距離
展開(kāi)時(shí),展示菜單控件,動(dòng)畫正向執(zhí)行;收起后,動(dòng)畫反向執(zhí)行,隱藏菜單控件;
在 Flutter 添加頁(yè)面過(guò)渡動(dòng)畫
[圖片上傳失敗...(image-c939db-1650550552942)]
大家好，在這篇文章中，我們將學(xué)習(xí)如何添加動(dòng)畫，同時(shí)從一個(gè)頁(yè)面到其他在 Flutter。我們將覆蓋不同類型的動(dòng)畫和實(shí)現(xiàn)基本動(dòng)畫 Flutter 使用包頁(yè)動(dòng)畫過(guò)渡。
page_animation_transition
[圖片上傳失敗...(image-1c5f15-1650550552942)]
動(dòng)畫在提升用戶體驗(yàn)方面起著至關(guān)重要的作用，但動(dòng)畫到底是什么呢？
設(shè)計(jì)語(yǔ)言，例如 Material，定義了在路線(或屏幕)之間轉(zhuǎn)換時(shí)的標(biāo)準(zhǔn)行為。不過(guò)，有時(shí)候，自定義屏幕之間的轉(zhuǎn)換可以使應(yīng)用程序更加獨(dú)特。
在本教程中，我們將使用包頁(yè)面 page_animation_transition 來(lái)簡(jiǎn)化在頁(yè)面上添加轉(zhuǎn)換。
使用插件探索不同的轉(zhuǎn)換
page_animation_transition
[圖片上傳失敗...(image-6b6c30-1650550552943)]
假設(shè)您正在從 PageOne 過(guò)渡到 PageTwo
以下是圖書館支持的動(dòng)畫類型:
對(duì)于預(yù)定義的路由:
Navigator.pushNamed(context, '/pageTwo');
Pushnamed (context,’/pageTwo’) ;
Output:
輸出:
[圖片上傳失敗...(image-aaf4a9-1650550552943)]
輸出:
[圖片上傳失敗...(image-8bd8a1-1650550552943)]
希望這個(gè)博客能幫助你深入了解 Flutter 的轉(zhuǎn)變。謝謝閱讀！如果有任何錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論中讓我知道，這樣我可以改進(jìn)。如果這個(gè)博客對(duì)你有幫助，就鼓掌吧！
? 貓哥
當(dāng)前標(biāo)題：flutter開(kāi)屏動(dòng)畫,flutter 啟動(dòng)動(dòng)畫
文章URL：http://fisionsoft.com.cn/article/dsiccce.html
