PixiJS的ticker（补帧动画）如何实现过渡函数（如ease）的效果？在使用 PixiJS 的 Ticker 实现

在使用 PixiJS 的 Ticker 实现动画时，若要添加如 ease 等过渡效果，可以借助缓动函数来控制动画的进度。缓动函数可以让动画的变化速度在开始、中间或结束阶段有所不同，从而实现更自然、丰富的动画效果。

实现思路

定义缓动函数：不同的缓动函数可以实现不同的动画效果，如线性、加速、减速等。
使用 Ticker 控制动画：在 Ticker 的回调函数中，根据当前时间和缓动函数计算动画的进度，并更新元素的属性。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PixiJS 缓动动画示例</title>
    <!-- 引入 PixiJS 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.8/pixi.min.js"></script>
</head>

<body>
    <script>
        // 创建 PixiJS 应用
        const app = new PIXI.Application({
            width: 800,
            height: 600,
            backgroundColor: 0xffffff
        });
        document.body.appendChild(app.view);

        // 创建一个精灵
        const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
        sprite.anchor.set(0.5);
        sprite.x = 100;
        sprite.y = app.screen.height / 2;
        app.stage.addChild(sprite);

        // 定义动画的起始和结束位置
        const startX = 100;
        const endX = 700;

        // 定义动画的持续时间（毫秒）
        const duration = 2000;

        // 记录动画开始的时间
        let startTime = null;

        // 缓动函数：easeOutQuad
        function easeOutQuad(t) {
            return 1 - (1 - t) * (1 - t);
        }

        // Ticker 回调函数
        function animate({deltaTime}) {
            if (startTime === null) {
                startTime = Data.now();
            }
            // 计算动画的进度（0 到 1 之间）
            const elapsed = Data.now() - startTime;
            let progress = elapsed / duration;
            if (progress > 1) {
                progress = 1;
            }
            // 使用缓动函数计算实际进度
            const easedProgress = easeOutQuad(progress);
            // 根据缓动进度更新精灵的位置，此处deltaTime用来减少运行的误差
            sprite.x = (startX + (endX - startX) * easedProgress) * deltaTime; 

            // 当动画结束时，停止 Ticker
            if (progress === 1) {
                app.ticker.remove(animate);
            }
        }

        // 启动 Ticker
        app.ticker.add(animate);
    </script>
</body>

</html>

代码解释

创建 PixiJS 应用和精灵：创建一个 PixiJS 应用，并添加一个精灵到舞台上。
定义动画参数：设置动画的起始和结束位置，以及动画的持续时间。
定义缓动函数：这里使用了 easeOutQuad 缓动函数，它会让动画在结束时减速。
Ticker 回调函数：在 animate 函数中，计算动画的进度，并使用缓动函数计算实际进度。根据实际进度更新精灵的位置。
启动 Ticker：将 animate 函数添加到 Ticker 中，开始动画。

其他缓动函数示例

// 线性缓动函数
function linear(t) {
    return t;
}

// easeInQuad 缓动函数
function easeInQuad(t) {
    return t * t;
}

// easeInOutQuad 缓动函数
function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

这样，你可以根据需要选择不同的缓动函数来实现不同的动画效果。