# 动画与 Ticker
PixiJS 的 Ticker 提供了高效的帧循环驱动动画。
# 基本 Ticker 用法 {#ticker-basics}
// 方式一：使用 app.ticker（推荐）
app.ticker.add((delta) => {
sprite.rotation += 0.1 * delta;
});
// delta 是帧时间增量，用于保持动画速度与帧率无关
1
2
3
4
5
6
2
3
4
5
6
# 缓动动画 {#easing-animation}
使用简单的缓动函数实现平滑动画：
// 弹性缓动
function elasticOut(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
let progress = 0;
const startX = 0;
const endX = 500;
app.ticker.add((delta) => {
progress += 0.02 * delta;
if (progress >= 1) {
progress = 0;
}
sprite.x = startX + (endX - startX) * elasticOut(progress);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 链式动画（Tween 风格） {#tween-animation}
function tween(obj, props, duration, easing = (t) => t) {
return new Promise((resolve) => {
const startValues = {};
for (const key in props) {
startValues[key] = obj[key];
}
let elapsed = 0;
const ticker = (delta) => {
elapsed += delta;
const progress = Math.min(elapsed / duration, 1);
const eased = easing(progress);
for (const key in props) {
obj[key] = startValues[key] + (props[key] - startValues[key]) * eased;
}
if (progress >= 1) {
app.ticker.remove(ticker);
resolve();
}
};
app.ticker.add(ticker);
});
}
// 链式调用
async function playAnimation() {
await tween(sprite, { x: 400, y: 300 }, 60, easeOutBack);
await tween(sprite, { alpha: 0, scale: { x: 0.5, y: 0.5 } }, 30);
await tween(sprite, { x: 0, y: 0, alpha: 1, scale: { x: 1, y: 1 } }, 60, easeOutElastic);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 旋转动画 {#rotation-animation}
// 不停旋转
app.ticker.add(() => {
sprite.rotation += 0.05;
});
// 来回摆动
let direction = 1;
app.ticker.add(() => {
sprite.rotation += 0.03 * direction;
if (Math.abs(sprite.rotation) > 0.5) {
direction *= -1;
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13