Flutter AnimationController回调原理，2024年最新春招面试视频

2401_84166458

已于 2024-04-11 05:46:35 修改

阅读量902

点赞数 9

分类专栏：程序员文章标签： flutter 面试音视频

于 2024-04-11 05:46:34 首次发布

本文链接：https://blog.csdn.net/2401_84166458/article/details/137621058

版权

程序员专栏收录该内容

30 篇文章 0 订阅

订阅专栏

@protected

void ensureFrameCallbacksRegistered() {

window.onBeginFrame ??= _handleBeginFrame;

window.onDrawFrame ??= _handleDrawFrame;

}

赋给了window.onBeginFram方法

/// Called by the engine to prepare the framework to produce a new frame.

///

/// This function calls all the transient frame callbacks registered by

/// [scheduleFrameCallback]. It then returns, any scheduled microtasks are run

/// (e.g. handlers for any [Future]s resolved by transient frame callbacks),

/// and [handleDrawFrame] is called to continue the frame.

///

/// If the given time stamp is null, the time stamp from the last frame is

/// reused.

///

/// To have a banner shown at the start of every frame in debug mode, set

/// [debugPrintBeginFrameBanner] to true. The banner will be printed to the

/// console using [debugPrint] and will contain the frame number (which

/// increments by one for each frame), and the time stamp of the frame. If the

/// given time stamp was null, then the string “warm-up frame” is shown

/// instead of the time stamp. This allows frames eagerly pushed by the

/// framework to be distinguished from those requested by the engine in

/// response to the “Vsync” signal from the operating system.

///

/// You can also show a banner at the end of every frame by setting

/// [debugPrintEndFrameBanner] to true. This allows you to distinguish log

/// statements printed during a frame from those printed between frames (e.g.

/// in response to events or timers).

void handleBeginFrame(Duration rawTimeStamp) {

Timeline.startSync(‘Frame’, arguments: timelineWhitelistArguments);

_firstRawTimeStampInEpoch ??= rawTimeStamp;

_currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);

if (rawTimeStamp != null)

_lastRawTimeStamp = rawTimeStamp;

_hasScheduledFrame = false;

try {

// TRANSIENT FRAME CALLBACKS

Timeline.startSync(‘Animate’, arguments: timelineWhitelistArguments);

_schedulerPhase = SchedulerPhase.transientCallbacks;

final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;

//调用callBack******

_transientCallbacks = <int, _FrameCallbackEntry>{};

callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {

if (!_removedIds.contains(id))

_invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp, callbackEntry.debugStack);

//**************************callback(timeStamp);

});

_removedIds.clear();

} finally {

_schedulerPhase = SchedulerPhase.midFrameMicrotasks;

}

当框架准备构建一帧的时候由engine调用，可以猜想endgine调用的实际上是window的onBegainFrame
它会回调[scheduleFrameCallback]中的所有方法（包括一些future的方法），当执行完成后，系统会调用[handleDrawFrame]

/// Signature for frame-related callbacks from the scheduler.

///

/// The timeStamp is the number of milliseconds since the beginning of the

/// scheduler’s epoch. Use timeStamp to determine how far to advance animation

/// timelines so that all the animations in the system are synchronized to a

/// common time base.

typedef FrameCallback = void Function(Duration timeStamp);

callback(timeStamp);

“时间戳”是自scheduler开始以来的毫秒数。使用时间戳来确定动画时间线要前进多远，以便系统中的所有动画都同步到一通用的时间线上。

**总结：**当每次系统绘制的之前，会回调到ui.windows的onBegainFrame，而这个onBegainFrame执行的是handleBeginFrame，将时间值回调给了每一个callback。这里注意的是，是在在绘制之前，因为我们一般在绘制之前去通过改变控件的属性值完成动画，而这个动作必须在绘制前完成。

Ticker

反向搜索谁调用了scheduleFrameCallback，发现是在Ticker中的scheduleTick，而scheduleTick有几个地方调用后面来看

/// Schedules a tick for the next frame.

///

/// This should only be called if [shouldScheduleTick] is true.

@protected

void scheduleTick({ bool rescheduling = false }) {

assert(!scheduled);

assert(shouldScheduleTick);

_animationId = SchedulerBinding.instance.scheduleFrameCallback(_tick, rescheduling: rescheduling);

}

这里发现ticker传入了一个_tick对象到scheduleFrameCallback中

void _tick(Duration timeStamp) {

assert(isTicking);

assert(scheduled);

_animationId = null;

_startTime ??= timeStamp;

_onTick(timeStamp - _startTime);

// The onTick callback may have scheduled another tick already, for

// example by calling stop then start again.

if (shouldScheduleTick)

scheduleTick(rescheduling: true);

}

final TickerCallback _onTick;

Ticker(this._onTick, { this.debugLabel }) {

assert(() {

_debugCreationStack = StackTrace.current;

return true;

}());

}

这里发现，_ticke方法，将时间戳，转换为一个相对时间，回调的到onTick中。onTicker是Ticker构造时候创建的。而Ticker的创建其实主要只在TickProvider中

@override

Ticker createTicker(TickerCallback onTick) {

_ticker = Ticker(onTick, debugLabel: kDebugMode ? ‘created by $this’ : null);

return _ticker;

}

那谁调用了这个createTicker呢，其实自然能联想到是AnimationController

AnimationController({

double value,

this.duration,

this.reverseDuration,

this.debugLabel,

this.lowerBound = 0.0,

this.upperBound = 1.0,

this.animationBehavior = AnimationBehavior.normal,

@required TickerProvider vsync,

}) : assert(lowerBound != null),

assert(upperBound != null),

assert(upperBound >= lowerBound),

assert(vsync != null),

_direction = _AnimationDirection.forward {

_ticker = vsync.createTicker(_tick);

_internalSetValue(value ?? lowerBound);

}

void _tick(Duration elapsed) {

_lastElapsedDuration = elapsed;

final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;

assert(elapsedInSeconds >= 0.0);

_value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);

if (_simulation.isDone(elapsedInSeconds)) {

_status = (_direction == _AnimationDirection.forward) ?

AnimationStatus.completed :

AnimationStatus.dismissed;

stop(canceled: false);

}

///注意到了 notifyListeners()方法，果然AnimationController继承自Animation继承自Listenable。

notifyListeners();

_checkStatusChanged();

}

**总结：**某个方法调用了scheduleTick之后，使的Ticker里面的回调函数_tick(Duration elapsed)被添加到transientCallbacks中，之后每次帧绘制之前候通过handleBeginFrame回调到这个方法。

那谁调用了scheduleTick,通过源码搜索Ticker中的一个start()的地方调用了这个函数。

每次启动动画的时候我们一般使用animation.forward()，

TickerFuture forward({ double from }) {

_direction = _AnimationDirection.forward;

//如果不为null 表示动画有起始值

if (from != null)

value = from;

return _animateToInternal(upperBound);

}

这个方法就两个作用，一个是将动画标记为开始状态，另一个作用如果为动画设置从哪一个位置开始，默认从起始点，之后调用_animateToInternal

TickerFuture _animateToInternal(double target, { Duration duration, Curve curve = Curves.linear }) {

//****************//

return _startSimulation(_InterpolationSimulation(_value, target, simulationDuration, curve, scale));

}

TickerFuture _startSimulation(Simulation simulation) {

_simulation = simulation;

_lastElapsedDuration = Duration.zero;

_value = simulation.x(0.0).clamp(lowerBound, upperBound);

// 此处调用ticker的start

final TickerFuture result = _ticker.start();

_status = (_direction == _AnimationDirection.forward) ?

AnimationStatus.forward :

AnimationStatus.reverse;

_checkStatusChanged();

return result;

}

**总结：**当调用animationController的forward的时候，最终会调到ticker的start方法，start方法调用scheduleTick开始了ticker与ScheduleBinding的绑定。整个过程是一个Windows- > ScheduleBinding -> Ticker ->AnimationController。

建立好绑定之后，每次帧绘制之前，都会回调到AnimationController的_tick方法中

void _tick(Duration elapsed) {

_lastElapsedDuration = elapsed;

final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;

assert(elapsedInSeconds >= 0.0);

_value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);

if (_simulation.isDone(elapsedInSeconds)) {

_status = (_direction == _AnimationDirection.forward) ?

AnimationStatus.completed :

AnimationStatus.dismissed;

stop(canceled: false);

}