当前位置：首页 > 文章列表 > 文章 > 前端 > requestAnimationFrame动画实现教程

requestAnimationFrame动画实现教程

2025-08-04 10:21:27 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《requestAnimationFrame 动画序列实现教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用 requestAnimationFrame 实现动画序列

本文介绍如何使用 requestAnimationFrame 实现动画效果的序列播放，解决多个动画同时执行的问题。通过自定义的 animateInterpolationSequence 函数，可以灵活地定义动画序列，控制动画的起始值、持续时间、缓动函数等，从而实现复杂的动画效果。文章包含详细的代码示例，展示如何使用该函数创建淡入淡出、闪烁等动画效果。

动画序列的实现

requestAnimationFrame 是一个浏览器 API，用于在浏览器准备好重新绘制屏幕时，通知开发者更新动画。它接受一个回调函数作为参数，该回调函数会在下一次重绘之前执行。通过 requestAnimationFrame，可以创建平滑流畅的动画效果。

然而，如果直接连续调用多个 requestAnimationFrame，它们的回调函数会几乎同时执行，导致动画效果重叠。为了解决这个问题，我们需要一种机制来控制动画的执行顺序，确保它们按照预定的顺序播放。

animateInterpolationSequence 函数

以下是一个通用的函数，可以处理任意过渡序列：

function animateInterpolationSequence (callback, ...sequence) {

    if (sequence.length == 0) {
        return null;
    }

    // this script supports 10 microseconds of precision without rounding errors
    let animationTimeStart = Math.floor(performance.now() * 100);
    let timeStart = animationTimeStart;
    let duration = 0;
    let easing;
    let valueStart;
    let valueEnd = sequence[0].start;
    let nextId = 0;
    let looped = (typeof sequence[sequence.length - 1].end != 'number');
    let alive = true;
    let rafRequestId = null;

    // callback of requestAnimationFrame
    function update (time) {

        time = (rafRequestId == null)
            ? animationTimeStart
            : Math.floor(time * 100);

        // iterate over finished sequence items
        while (time - timeStart >= duration) {

            if (sequence.length > nextId) {
                // proceed to the next item
                let currentItem = sequence[nextId++];
                let action =
                    (sequence.length > nextId)
                        ? 'continue':
                    (looped)
                        ? 'looping'
                        : 'finishing';
                if (action == 'looping') {
                    nextId = 0;
                }
                timeStart += duration;
                duration = Math.floor(currentItem.duration * 100);
                easing = (typeof currentItem.easing == 'function')? currentItem.easing: null;
                valueStart = valueEnd;
                valueEnd = (action == 'finishing')? currentItem.end: sequence[nextId].start;
            }

            else {
                // the animation is finished
                safeCall(() => callback((time - animationTimeStart) / 100, valueEnd, true));
                return;
            }
        }

        // interpolation math
        let x = (time - timeStart) / duration;
        if (easing) {
            x = safeCall(() => easing(x), x);
        }
        let value = valueStart + (valueEnd - valueStart) * x;

        // continue the animation
        safeCall(() => callback((time - animationTimeStart) / 100, value, false));
        if (alive) {
            rafRequestId = window.requestAnimationFrame(update);
        }
    }

    // exceptions are our friends
    // if they have to say something, we'll give them the opportunity
    function safeCall (callback, defaultResult) {
        try {
            return callback();
        }
        catch (e) {
            window.setTimeout(() => { throw e; });
            return defaultResult;
        }
    }

    update();
    return function stopAnimation () {
        window.cancelAnimationFrame(rafRequestId);
        alive = false;
    };
}

这个函数接受一个回调函数 callback 和一个动画序列 sequence 作为参数。callback 函数会在每一帧被调用，用于更新动画效果。sequence 是一个数组，包含一系列动画片段的描述。

每个动画片段是一个对象，包含以下属性：

start: 动画的起始值。
duration: 动画的持续时间（毫秒）。
end (可选): 动画的结束值。如果没有提供end，则认为动画是循环的。
easing (可选): 缓动函数，用于控制动画的速度变化。

animateInterpolationSequence 函数内部使用 requestAnimationFrame 来驱动动画，并根据 sequence 中的描述，依次执行每个动画片段。

使用示例

以下是一个使用 animateInterpolationSequence 函数实现星形动画的示例：

function renderStar (alpha, rotation, corners, density) {

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    ctx.save();

    // erase
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw checkerboard
    ctx.fillStyle = 'rgba(0, 0, 0, .2)';
    let gridSize = 20;
    for (let y = 0; y * gridSize < canvas.height; y++) {
        for (let x = 0; x * gridSize < canvas.width; x++) {
            if ((y + x + 1) & 1) {
                ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
            }
        }
    }

    // star: geometry math
    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;
    let radius = Math.min(centerX, centerY) * 0.9;
    function getCornerCoords (corner) {
        let angle = rotation + (Math.PI * 2 * corner / corners);
        return [
            centerX + Math.cos(angle) * radius,
            centerY + Math.sin(angle) * radius
        ];
    }

    // star: build path
    ctx.beginPath();
    ctx.moveTo(...getCornerCoords(0));
    for (let i = density; i != 0; i = (i + density) % corners) {
        ctx.lineTo(...getCornerCoords(i));
    }
    ctx.closePath();

    // star: draw
    ctx.shadowColor = 'rgba(0, 0, 0, .5)';
    ctx.shadowOffsetX = 6;
    ctx.shadowOffsetY = 4;
    ctx.shadowBlur = 5;
    ctx.fillStyle = `rgba(255, 220, 100, ${alpha})`;
    ctx.fill();
    ctx.restore();
}

// quintic easing
function easeOutQuint (x) {
    return 1 - Math.pow(1 - x, 5);
}

// the demo
animateInterpolationSequence(
    (time, value, finished) => {
        renderStar(value, Date.now() / 1000, 5, 2);
    },

    { start: 1, duration: 2000 }, // 0 to 2 sec: opaque

    { start: 1, duration: 500  }, // 2 to 3 sec: linear fade-out + fade-in
    { start: 0, duration: 500  },
    { start: 1, duration: 500  }, // 3 to 4 sec: again
    { start: 0, duration: 500  },

    { start: 1, duration: 2000 }, // 4 to 6 sec: opaque

    { start: 1, duration: 500,    // 6 to 7 sec: fade-out + fade-in
      easing: easeOutQuint     }, //             with custom easing
    { start: 0, duration: 500,
      easing: easeOutQuint     },
    { start: 1, duration: 500,    // 7 to 8 sec: again
      easing: easeOutQuint     },
    { start: 0, duration: 500,
      easing: easeOutQuint     },

    { start: 1, duration: 2000 }, // 8 to 10 sec: opaque
    { start: 1, duration: 0    }, // instant switch ahead

    ...((delay, times) => {       // 10 to 11 sec: flicker
        let items = [
            { start: .75, duration: delay }, // wait
            { start: .75, duration: 0     }, // instant switch .75 -> .25
            { start: .25, duration: delay }, // wait
            { start: .25, duration: 0     }  // instant switch .25 -> .75
        ];
        while (--times) {
            items.push(items[0], items[1], items[2], items[3]);
        }
        return items;
    })(50, 20)
);

<canvas id="canvas" width="400" height="180"></canvas>

在这个示例中，renderStar 函数用于绘制星形。animateInterpolationSequence 函数被用来控制星形的透明度变化，实现淡入淡出、闪烁等效果。

注意事项

animateInterpolationSequence 函数依赖于 performance.now() 和 requestAnimationFrame API，请确保浏览器支持这些 API。
动画序列中的每个动画片段的持续时间单位是毫秒。
缓动函数应该接受一个 0 到 1 之间的值作为参数，并返回一个 0 到 1 之间的值，用于控制动画的速度变化。
在停止动画时，应该调用 animateInterpolationSequence 函数返回的函数，以取消 requestAnimationFrame 的回调。