动画制作：SVG与JavaScript的完美结合

Paula-柒月拾

于 2025-05-17 14:28:02 发布

阅读量217

点赞数 5

文章标签： SVG动画 JavaScript动画 requestAnimationFrame 性能考量动画时间控制

本文链接：https://blog.csdn.net/weixin_42588672/article/details/148040959

版权

动画制作：SVG与JavaScript的完美结合

SVG动画在网页中能够提供丰富的动态视觉效果，而JavaScript则为动画提供了无限的可能性和灵活性。本文将介绍如何利用requestAnimationFrame()和performance.now()方法精确控制动画时间，并探讨如何计算动画的当前值，以及如何实现沿路径的动画。

动画时间的精确控制

动画的精确计时是创建流畅动画体验的关键。 requestAnimationFrame() 方法是控制动画帧的关键技术，它会在浏览器重绘前调用指定的函数，从而实现平滑的动画效果。通过递归调用 requestAnimationFrame(updateTime) ，我们可以持续更新动画状态，直到计时结束。

var endTime;
requestAnimationFrame(updateTime);
function updateTime(t) {
    if (!endTime) {
        endTime = t + timeLimit*1000;
    }
    var timeLeft = endTime - t;
    if (timeLeft <= 0) {
        endGame();
        timeLeft = 0;
    } else {
        requestAnimationFrame(updateTime);
    }
    timer.textContent = (timeLeft/1000).toFixed(1);
}

此外， performance.now() 方法可以提供比 Date.now() 更高的精度，它返回的是从页面加载开始到调用时刻的毫秒数。这对于需要精确时间戳的场景非常有用。

计算动画的当前值

计算动画的当前值主要有两种方法：插值和基于物理的动画。插值动画基于你希望应用的变化量和所需时间，通过将当前时间转换为动画持续时间的比例来计算。而基于物理的动画则定义了移动物体的属性，如速度和加速度，并从这些属性中计算运动。

var track = document.getElementById("track"),
    trackLength = track.getTotalLength(),
    beads = document.querySelectorAll("[*|href='#bead']"),
    nBeads = beads.length,
    dur = 5000; //duration of one loop of track, in ms

function update(time) {
    var t = (time % dur) / dur,
        distance, /* distance along the path for this bead */
        point, /* SVGPoint for that distance */
        point2; /* SVGPoint for a slightly different distance */
    for (var i=0; i<nBeads; i++) {
        distance = trackLength * ( (t + i/nBeads) % 1 );
        point = track.getPointAtLength(distance);
        point2 = track.getPointAtLength((distance+2)%trackLength);
        angle = Math.atan2( (point2.y - point.y), (point2.x - point.x) );
        beads[i].setAttribute("transform",
            "translate(" + [point.x, point.y] + ")"
            + "rotate(" + angle*180/Math.PI + ")");
    }
    requestAnimationFrame(update);
}
requestAnimationFrame(update);

浏览器支持与性能考量

在使用JavaScript进行动画制作时，我们必须考虑到不同浏览器的支持情况。 requestAnimationFrame() 和 performance.now() 虽然在现代浏览器中广泛支持，但在某些旧版浏览器中可能需要polyfill。另外，动画的性能考量同样重要，尤其是在涉及大量动画元素时。