如何用javascript实现动画效果_有哪些技术可选？

在前端开发中，使用javascript实现动画效果可以满足很多复杂的交互需求，不同的技术方案在性能、实现难度、适用场景上都有差异，开发者可以根据实际需求选择合适的方案。

一、基于定时器的动画方案

这是比较早期的javascript动画实现方式，主要通过setTimeout或者setInterval按照固定时间间隔修改元素样式来实现动画效果。

1. setTimeout实现动画

setTimeout可以在指定延迟后执行一次回调函数，通过递归调用可以模拟动画的逐帧更新。

// 获取需要操作的元素
const box = document.getElementById('box');
let position = 0;
// 定义动画更新函数
function updateAnimation() {
    position += 2;
    // 修改元素的left样式实现水平移动
    box.style.left = position + 'px';
    // 当移动距离小于200px时，继续调用自身实现下一帧更新
    if (position < 200) {
        setTimeout(updateAnimation, 16);
    }
}
// 启动动画
updateAnimation();

2. setInterval实现动画

setInterval会按照固定时间间隔重复执行回调函数，不需要手动递归调用，但是需要注意及时清除定时器避免内存泄漏。

const box = document.getElementById('box');
let position = 0;
// 定义定时器，每16ms执行一次更新
const timer = setInterval(() => {
    position += 2;
    box.style.left = position + 'px';
    // 移动完成后清除定时器
    if (position >= 200) {
        clearInterval(timer);
    }
}, 16);

这种方案的缺点比较明显，定时器的执行时间并不精确，容易受到主线程任务阻塞的影响，而且无法和浏览器的刷新频率同步，容易出现动画卡顿的问题。

二、requestAnimationFrame方案

requestAnimationFrame是浏览器专门为动画提供的API，它会在浏览器下一次重绘之前执行回调函数，执行频率和浏览器的刷新频率保持一致，通常每秒60帧，动画效果更加流畅。

基本使用方式

const box = document.getElementById('box');
let position = 0;
// 定义动画帧更新函数
function animate() {
    position += 2;
    box.style.left = position + 'px';
    // 如果还没到达目标位置，继续请求下一帧动画
    if (position < 200) {
        requestAnimationFrame(animate);
    }
}
// 启动动画
requestAnimationFrame(animate);

这个方案的优势在于性能更好，当页面处于后台运行时，浏览器会自动暂停requestAnimationFrame的执行，减少不必要的资源消耗。如果需要停止动画，可以使用cancelAnimationFrame方法，需要传入对应的请求ID。

let animationId = null;
const box = document.getElementById('box');
let position = 0;
function animate() {
    position += 2;
    box.style.left = position + 'px';
    if (position < 200) {
        animationId = requestAnimationFrame(animate);
    }
}
// 启动动画
animationId = requestAnimationFrame(animate);
// 停止动画的示例
function stopAnimation() {
    if (animationId) {
        cancelAnimationFrame(animationId);
    }
}

三、结合CSS动画的混合方案

对于简单的动画效果，可以优先使用CSS的transition或者animation实现，javascript只负责控制动画的触发和状态切换，这样性能更好，代码也更简洁。

1. 控制CSS transition动画

先通过CSS定义过渡效果，再用javascript修改元素的样式触发动画。

#box {
    width: 100px;
    height: 100px;
    background-color: #409eff;
    position: absolute;
    left: 0;
    /* 定义left属性的过渡效果，持续1秒，匀速运动 */
    transition: left 1s linear;
}

const box = document.getElementById('box');
// 修改left值触发CSS过渡动画
box.style.left = '200px';

2. 控制CSS animation动画

通过CSS定义关键帧动画，再用javascript添加或者移除对应的类名来触发动画。

/* 定义关键帧动画 */
@keyframes moveAnimation {
    from {
        left: 0;
    }
    to {
        left: 200px;
    }
}
.move-class {
    animation: moveAnimation 1s linear forwards;
}

const box = document.getElementById('box');
// 添加类名触发动画
box.classList.add('move-class');
// 动画结束后移除类名，方便下次触发
box.addEventListener('animationend', () => {
    box.classList.remove('move-class');
});

四、不同方案的选择建议

如果动画逻辑非常简单，比如只是修改透明度、位置等基础属性，优先选择CSS动画方案，性能最优。

如果动画逻辑复杂，需要根据实时数据动态计算每一帧的状态，比如游戏动画、复杂的交互反馈动画，优先选择requestAnimationFrame方案。

除非是需要兼容非常老旧的浏览器，否则不建议使用setTimeout或者setInterval实现动画，避免卡顿问题。

javascript动画实现requestAnimationFrameCSS_animationsetTimeout修改时间：2026-07-07 03:39:26