首先撮弧，如果你還不知道什么是Flutter的話瓦堵，請看這里,簡單講就是Google自己的React Native逼纸。它使用的編程語言是Dart借帘，如果不知道什么是Dart的話請看這里蜘渣。有人可能會問這兩個東西聽都沒聽過，學(xué)了有用嗎肺然？我的答案是“俺也不知道”蔫缸。
廢話都多說，下面開始學(xué)習(xí)Flutter的Animation际起。
Example
我們先來看下最后的運(yùn)行結(jié)果：
基本邏輯就是點(diǎn)擊按鈕拾碌，執(zhí)行一個Animation，然后我們的自定義View就會根據(jù)這個Animation不斷變化的值來繪制一個圓形街望。接下來就看看代碼是怎么實(shí)現(xiàn)的校翔？
class _AnimationPainter extends CustomPainter{
Animation<double> _repaint ;
_AnimationPainter({
Animation<double> repaint
}):_repaint = repaint,super(repaint:repaint);
@override
void paint(Canvas canvas, Size size){
final Paint paint = new Paint()
..color = Colors.red[500].withOpacity(0.25)
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
canvas.drawCircle(new Point(size.width/2, size.height/2), _repaint.value, paint);
}
@override
bool shouldRepaint(_AnimationPainter oldDelegate){
return oldDelegate._repaint != _repaint;
}
}
首先我們先來自定義一個Painter,這個Painter繼承自CustomPainter，構(gòu)造方法中接收一個Animation對象它匕。在它的paint()方法中使用_repaint.value作為圓形的半徑進(jìn)行繪圖展融。
接下來我們再看主布局：
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo')
),
body: new Center(
child: new CustomPaint(
key:new GlobalKey(),
foregroundPainter: new _AnimationPainter(
repaint:_animation
)
)
),
floatingActionButton: new FloatingActionButton(
onPressed: _startAnimation,
tooltip: 'startAnimation',
child: new Icon(Icons.add)
)
);
}
可以看到我們使用了一個CustomPaint，在Flutter中這算是一個自定義布局豫柬。接著給它構(gòu)造方法中的foregroundPainter參數(shù)傳遞一個我們之前定義的_AnimationPainter告希。
下面還定義了一個按鈕，點(diǎn)擊事件為_startAnimation：
void _startAnimation() {
_animation.forward(from:0.0);
}
_startAnimation很簡單烧给，就是用來開始一個動畫的燕偶。
OK，到這里布局就講完了础嫡，這時候我們還缺啥指么？對了，我們還缺一個Animation對象榴鼎，下面就定義一個：
AnimationController _animation = new AnimationController(
duration: new Duration(seconds: 3),
lowerBound: 0.0,
upperBound: 500.0
);
大家可能會好奇AnimationController又是個啥玩意伯诬？它其實(shí)是Animation的一個子類，可以用來控制Animation行為巫财。
到這里所有相關(guān)代碼都交代完了盗似，編譯運(yùn)行就能出結(jié)果。
完整代碼：
import 'package:flutter/material.dart';
void main() {
runApp(
new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue
),
home: new FlutterDemo()
)
);
}
class FlutterDemo extends StatefulWidget {
FlutterDemo({Key key}) : super(key: key);
@override
_FlutterDemoState createState() => new _FlutterDemoState();
}
class _FlutterDemoState extends State<FlutterDemo> {
AnimationController _animation = new AnimationController(
duration: new Duration(seconds: 3),
lowerBound: 0.0,
upperBound: 500.0
);
void _startAnimation() {
_animation.forward(from:0.0);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo')
),
body: new Center(
child: new CustomPaint(
key:new GlobalKey(),
foregroundPainter: new _AnimationPainter(
repaint:_animation
)
)
),
floatingActionButton: new FloatingActionButton(
onPressed: _startAnimation,
tooltip: 'startAnimation',
child: new Icon(Icons.add)
)
);
}
}
class _AnimationPainter extends CustomPainter{
Animation<double> _repaint ;
_AnimationPainter({
Animation<double> repaint
}):_repaint = repaint,super(repaint:repaint);
@override
void paint(Canvas canvas, Size size){
final Paint paint = new Paint()
..color = Colors.red[500].withOpacity(0.25)
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
canvas.drawCircle(new Point(size.width/2, size.height/2), _repaint.value, paint);
}
@override
bool shouldRepaint(_AnimationPainter oldDelegate){
return oldDelegate._repaint != _repaint;
}
}
Animation原理
事物的運(yùn)動狀態(tài)改變是需要外力的平项，Animation也一樣從靜止到運(yùn)動(動畫執(zhí)行階段)赫舒，肯定有一股外力的存在悍及，那這股力量就是啥？我們來一探究竟接癌。
在Flutter中的一切都是由flutter engine來驅(qū)動的心赶，看下圖：
由于flutter engine超出了我們討論范圍，我們這里只是假設(shè)它有一個叫做freshScreen()的方法缺猛，用于刷新屏幕缨叫。對了，這里的freshScreen就是我們Animation最原始的動力荔燎，接下來介紹一個叫做
Scheduler的類弯汰，如下圖：
它是一個單例，它內(nèi)部有一個callback列表湖雹，用來存儲某些回調(diào)咏闪，而addFrameCallback方法就是往callback列表添加回調(diào)的。那這里的handleBeginFrame又是干么的呢摔吏？當(dāng)flutter engine每調(diào)用一次freshScreen的時候鸽嫂，就回去調(diào)用Scheduler的handleBeginFrame方法，而在handleBeginFrame中會將callback列表中所有的回調(diào)調(diào)用一遍征讲。并且會給每個回調(diào)傳遞一個當(dāng)時的時間戳据某。到這里似乎還沒有Animation什么事，我們繼續(xù)往下看诗箍。
到這邊我們應(yīng)該知道系統(tǒng)中有個叫Schedule的類癣籽，你只要調(diào)用它的addFrameCallback方法，向其中添加回調(diào)滤祖，那么這個回調(diào)就因?yàn)榻缑娴乃⑿露恢北徽{(diào)用筷狼。那么又是誰來使用addFrameCallback呢？答案就是Ticker匠童。
Ticker是一個類似可控的計(jì)時器埂材，調(diào)用它的start方法后，內(nèi)部會調(diào)用它的_scheduleTick方法汤求，其中會向Schedule中添加名為_tick的方法回調(diào)俏险。而在_tick的方法回調(diào)中會調(diào)用到_onTick方法。這個_onTick方法是外部傳入的扬绪，可自定義其中的內(nèi)容竖独。并且每一次調(diào)用_onTick都會傳入一個時間參數(shù)，這個參數(shù)表示從調(diào)用start開始經(jīng)歷的時間長度挤牛。
那么到這里我們知道了莹痢，我們不必直接跟Schedule打交道，有一個更好用的Ticker，我們只要給Ticker傳入一個回調(diào)格二，就能不斷的拿到一個△t，這個△t = now-timeStart竣蹦。正是這個△t為我們推來了Animation的大門顶猜。
OK，到這里我們知道了Animation動畫執(zhí)行的動力在哪了痘括，接下來看看Animation內(nèi)部是怎么利用Ticker實(shí)現(xiàn)的长窄？
我們回到上面的小例子，拋開自定義的試圖纲菌，關(guān)鍵的代碼其實(shí)就兩行挠日，如下：
AnimationController _animation = new AnimationController(
duration: new Duration(seconds: 3),
lowerBound: 0.0,
upperBound: 500.0
);
_animation.forward(from:0.0);
分別是初始化一個動畫和開始一個動畫。那就從這兩行入手翰舌，看看底下的源碼實(shí)現(xiàn)嚣潜。
先看構(gòu)造函數(shù)：
AnimationController({
double value,
this.duration,
this.debugLabel,
this.lowerBound: 0.0,
this.upperBound: 1.0
}) {
assert(upperBound >= lowerBound);
_direction = _AnimationDirection.forward;
_ticker = new Ticker(_tick);
_internalSetValue(value ?? lowerBound);
}
這里沒什么，只是初始化一些值椅贱，如動畫的值得上下邊界懂算，執(zhí)行時間和目前值。值得注意的是這里初始化了一個Ticker庇麦，我們看看Ticker的初始化都做了什么计技？
Ticker(TickerCallback onTick) : _onTick = onTick;
這里初始化了Ticker的_onTick方法，相當(dāng)于傳入了一個回調(diào)用于Ticker來和Animation_controller交互山橄。具體先不看傳入的這個_tick方法是啥垮媒，后面真正遇到了在做分析。
接著就是forward方法了航棱，它的作用就是讓Animation的值從當(dāng)前值變化到最大值睡雇。若不設(shè)置參數(shù)，即默認(rèn)為下限值饮醇。
Future<Null> forward({ double from }) {
_direction = _AnimationDirection.forward;
if (from != null)
value = from;
return animateTo(upperBound);
}
OK,這是一個異步的方法入桂，重點(diǎn)在animateTo這個方法，繼續(xù)：
Future<Null> animateTo(double target, { Duration duration, Curve curve: Curves.linear }) {
Duration simulationDuration = duration;
if (simulationDuration == null) {
assert(this.duration != null);
double range = upperBound - lowerBound;
double remainingFraction = range.isFinite ? (target - _value).abs() / range : 1.0;
simulationDuration = this.duration * remainingFraction;
}
stop();
if (simulationDuration == Duration.ZERO) {
assert(value == target);
_status = (_direction == _AnimationDirection.forward) ?
AnimationStatus.completed :
AnimationStatus.dismissed;
_checkStatusChanged();
return new Future<Null>.value();
}
assert(simulationDuration > Duration.ZERO);
assert(!isAnimating);
return _startSimulation(new _InterpolationSimulation(_value, target, simulationDuration, curve));
}
雖然這里代碼有些多驳阎，但大部分是一些條件判斷和預(yù)處理抗愁，這里不需要理會，我們看關(guān)鍵的：
_startSimulation(new _InterpolationSimulation(_value, target, simulationDuration, curve));
這里引入了一個新的概念Simulation呵晚，它其實(shí)相當(dāng)于一個時間t和坐標(biāo)x及速度v的關(guān)系蜘腌，它有一個x(t)方法，接受一個參數(shù)t及時間饵隙，返回t時間時x的值撮珠。在Animation中就是t時刻的值。而這個t就是Ticker產(chǎn)生的金矛，我們接著往下看：
Future<Null> _startSimulation(Simulation simulation) {
assert(simulation != null);
assert(!isAnimating);
_simulation = simulation;
_lastElapsedDuration = Duration.ZERO;
_value = simulation.x(0.0).clamp(lowerBound, upperBound);
Future<Null> result = _ticker.start();
_status = (_direction == _AnimationDirection.forward) ?
AnimationStatus.forward :
AnimationStatus.reverse;
_checkStatusChanged();
return result;
}
這里也是做了一些值得初始化芯急，關(guān)鍵的一句是：
_ticker.start();
這里啟動了Ticker,我們看看start里面又做了什么勺届？
Future<Null> start() {
assert(!isTicking);
assert(_startTime == null);
_completer = new Completer<Null>();
_scheduleTick();
if (SchedulerBinding.instance.isProducingFrame)
_startTime = SchedulerBinding.instance.currentFrameTimeStamp;
return _completer.future;
}
上面我們主要關(guān)注 _scheduleTick()這個方法，
void _scheduleTick({ bool rescheduling: false }) {
assert(isTicking);
assert(_animationId == null);
_animationId = SchedulerBinding.instance.scheduleFrameCallback(_tick, rescheduling: rescheduling);
}
到這里小伙伴們應(yīng)該已經(jīng)看出來了娶耍，這里Ticker將自己的_tick方法回調(diào)注冊到了Scheduler中免姿，一旦注冊完，隨著屏幕的刷新榕酒，_tick將會被不停的調(diào)用胚膊，
void _tick(Duration timeStamp) {
assert(isTicking);
assert(_animationId != null);
_animationId = null;
if (_startTime == null)
_startTime = timeStamp;
_onTick(timeStamp - _startTime);
// The onTick callback may have scheduled another tick already.
if (isTicking && _animationId == null)
_scheduleTick(rescheduling: true);
}
_tick方法中主要做了對時間的處理，它會將從開始到當(dāng)前的時間間隔傳給_onTick這個方法想鹰，而這個方法就是之前AnimationController傳遞進(jìn)來的紊婉。及下面的_tick方法：
void _tick(Duration elapsed) {
_lastElapsedDuration = elapsed;
double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.MICROSECONDS_PER_SECOND;
_value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
if (_simulation.isDone(elapsedInSeconds)) {
_status = (_direction == _AnimationDirection.forward) ?
AnimationStatus.completed :
AnimationStatus.dismissed;
stop();
}
notifyListeners();
_checkStatusChanged();
}
這里應(yīng)該看的很明白了，AnimationController的_tick會被不停的調(diào)用辑舷，而AnimationController的值則是由_simulation來根據(jù)時間計(jì)算得來喻犁。接著再調(diào)用notifyListeners()和 _checkStatusChanged()通知監(jiān)聽AnimatinController的對象。
Animation的運(yùn)行原理差不多就是這些何缓，有疑問或?qū)Υ烁信d的可以在我主頁中找到我的微信二維碼株汉，加我好友，我們慢慢聊歌殃。
