Skip to main content

Ticker

PixiJS 中的 Ticker 类提供了一种强大而灵活的机制,用于在每个动画帧上执行回调。它对于管理游戏循环、动画以及任何基于时间的更新非常有用。

🌐 The Ticker class in PixiJS provides a powerful and flexible mechanism for executing callbacks on every animation frame. It's useful for managing game loops, animations, and any time-based updates.

import { Ticker } from 'pixi.js';

const ticker = new Ticker();

ticker.add((ticker) => {
console.log(`Delta Time: ${ticker.deltaTime}`);
});

// Start the ticker
ticker.start();

添加和移除监听器

🌐 Adding and Removing Listeners

Ticker 类允许你添加多个监听器,这些监听器将在每一帧上被调用。你还可以为回调指定上下文,这对于保持正确的 this 引用非常有用。

🌐 The Ticker class allows you to add multiple listeners that will be called on every frame. You can also specify a context for the callback, which is useful for maintaining the correct this reference.

ticker.add(myFunction, myContext);
ticker.addOnce(myFunction, myContext);
ticker.remove(myFunction, myContext);

控制 Ticker

🌐 Controlling the Ticker

ticker.start(); // Begin calling listeners every frame
ticker.stop(); // Pause the ticker and cancel the animation frame

要在添加监听器时自动启动计时器,请启用 autoStart

🌐 To automatically start the ticker when a listener is added, enable autoStart:

ticker.autoStart = true;

确定监听器优先级

🌐 Prioritizing Listeners

监听器可以被分配优先级。数值越高,运行越早。

🌐 Listeners can be assigned a priority. Higher values run earlier.

import { UPDATE_PRIORITY } from 'pixi.js';

ticker.add(fnA, null, UPDATE_PRIORITY.HIGH); // runs before...
ticker.add(fnB, null, UPDATE_PRIORITY.NORMAL); // ...this

可用常量包括:

🌐 Available constants include:

  • UPDATE_PRIORITY.HIGH = 50
  • UPDATE_PRIORITY.NORMAL = 0
  • UPDATE_PRIORITY.LOW = -50

配置 FPS

🌐 Configuring FPS

Tickers 允许通过 FPS 限制来控制更新速率。

🌐 Tickers allows FPS limits to control the update rate.

minFPS

限制帧允许的最慢速度。用来限制 deltaTime

🌐 Caps how slow frames are allowed to be. Used to clamp deltaTime:

ticker.minFPS = 30; // deltaTime will never act as if below 30 FPS

maxFPS

限制计时器运行的速度。对节省 CPU/GPU 有用:

🌐 Limits how fast the ticker runs. Useful for conserving CPU/GPU:

ticker.maxFPS = 60; // will not tick faster than 60fps

设置为 0 以允许无限帧率:

🌐 Set to 0 to allow unlimited framerate:

ticker.maxFPS = 0;

API 参考

🌐 API Reference