PixiJS 源码深度解读:用于循环渲染的 Ticker 模块

619 阅读3分钟

大家好,我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。

Ticker 的作用是 在下一帧绘制前调用监听器,PixiJS 使用它来不断对画面进行重绘

使用

在我们 实例化 PIXI.Application 时,PIXI.Application 内部注册的插件之一的 TickerPlugin 会被初始化:

Application._plugins.forEach((plugin) => {
  plugin.init.call(this, options);
});

将 Application 的渲染器 renderer 的 render 方法注册进去,然后每帧都会会被调用。

ticker = options.sharedTicker ? Ticker.shared : new Ticker();
ticker.add(this.render, this, UPDATE_PRIORITY.LOW);

也可以直接使用:

const ticker = new PIXI.Ticker();
// ticker.autoStart = true;

ticker.add(() => {
  console.log("前端西瓜哥");
});

ticker.add(() => {
  console.log("fe_watermelon");
});

ticker.start();

目录结构

Ticker 的代码都在  packages/ticker 目录下。

图片

构造函数

看一下 Ticker 的构造函数:

class Ticker {
  constructor() {
    this._head = new TickerListener(nullnull, Infinity);
    this.deltaMS = 1 / Ticker.targetFPMS;
    this.elapsedMS = 1 / Ticker.targetFPMS;

    this._tick = (time: number): void => {
      this._requestId = null;

      if (this.started) {
        // Invoke listeners now
        this.update(time);
        // Listener side effects may have modified ticker state.
        if (this.started && this._requestId === null && this._head.next) {
          this._requestId = requestAnimationFrame(this._tick);
        }
      }
    };
  }
}


做了哪些事情:

(1)初始化一个空的监听器函数

this._head = new TickerListener(nullnull, Infinity);

使用了链表来管理多个监听器函数,所以这个空的 this._head 就是这个链表的头部 哨兵节点(虚节点)。

哨兵节点是一个链表编程技巧,目的是让真正的头部节点能和其他普通节点有一致的实现,不需要老是判断 head 是否为 null,对头节点做特殊处理,达到降低实现难度的目的。

监听器函数会被封装成一个 TickerListener 的类,提供 priority(优先级)、once(只执行一次) 等特性。其中的 next 指向下一个监听函数,确保监听器函数能够按照注册顺序依次执行。

不过 TickerListener 有个 优先级的概念,监听器在加入的时候,会插入合适的位置,最终保证优先级是从高往低的。优先级类型在 UPDATE_PRIORITY 这个枚举变量中。

顺带一提,application 的 render 方法优先级是 UPDATE_PRIORITY.LOW,哨兵节点则是突破天际的 Infinity。

关于监听器函数链表的维护相关代码,其实就是双向链表的一些常规操作,本文不会过多叙述。

(2)执行监听器函数

this.update(time);

这里是执行所有监听器函数的地方。

其下的核心代码为:

while (listener)
{
  listener = listener.emit(this.deltaTime);
}

listener.emit() 方法会执行当前的 listener 方法,并返回它的 next。不断循环,直到 next 为 null 结束。

(3)循环调用 this._tick 方法

this._requestId = requestAnimationFrame(this._tick);

这里用了浏览器提供的 requestAnimationFrame 方法,实现循环调用 this._tick 方法。为了方便描述,通常简写为 raf。

this.head.next 表示有注册的监听函数。

结尾

Ticker 模块并不复杂的,是对 requestAnimationFrame 的一层封装,并使用链表做监听器函数的维护。

我是前端西瓜哥,欢迎关注我,学习更多前端知识。


相关阅读,

PixiJS 源码解读:绘制矩形,底层都做了什么?

一起学 pixijs(1):常见图形的绘制