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

作者：前端西瓜哥 2023-06-08 08:16:33开发 前端 Ticker 的作用是 在下一帧绘制前调用监听器，PixiJS 使用它来不断对画面进行重绘。深度

大家好，解读我是循环渲染前端西瓜哥。这次来看看 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(null, null, 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(null, null, 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 的一层封装，并使用链表做监听器函数的维护。

责任编辑：姜华 来源： 前端西瓜哥 TickerPixiJS

(责任编辑：休闲)