js实现帧动画效果
使用CSS和JavaScript实现帧动画
通过CSS的animation属性和@keyframes规则实现基础帧动画，JavaScript控制播放状态。CSS定义动画关键帧，JavaScript通过类名切换控制。
.frame-animation {
width: 100px;
height: 100px;
background-image: url('sprite.png');
animation: play 1s steps(10) infinite;
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -1000px; }
}const element = document.querySelector('.frame-animation');
element.classList.add('frame-animation'); // 开始动画
element.classList.remove('frame-animation'); // 停止动画使用Canvas绘制帧动画
通过Canvas逐帧绘制精灵图实现更复杂的控制。计算每帧位置，使用requestAnimationFrame实现循环。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const sprite = new Image();
sprite.src = 'sprite.png';
let frameIndex = 0;
const frameWidth = 100;
const totalFrames = 10;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(
sprite,
frameIndex * frameWidth, 0, frameWidth, 100,
0, 0, frameWidth, 100
);
frameIndex = (frameIndex + 1) % totalFrames;
requestAnimationFrame(animate);
}
sprite.onload = animate;使用定时器控制DOM元素动画
通过setInterval定时切换DOM元素的背景位置实现简单帧动画。适用于少量帧的动画场景。
const element = document.getElementById('animated-element');
let currentFrame = 0;
const frameCount = 5;
const frameWidth = 100;
const animation = setInterval(() => {
element.style.backgroundPosition = `-${currentFrame * frameWidth}px 0`;
currentFrame = (currentFrame + 1) % frameCount;
}, 100);使用Web Animation API实现
现代浏览器支持的Web Animation API提供更强大的动画控制能力。定义关键帧对象并指定时间选项。
const element = document.getElementById('animated-element');
const frames = [
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(1.2)', opacity: 0.8 },
{ transform: 'scale(1)', opacity: 1 }
];
const animation = element.animate(
frames,
{
duration: 1000,
iterations: Infinity,
easing: 'ease-in-out'
}
);
animation.pause(); // 暂停动画
animation.play(); // 继续播放使用第三方动画库
考虑使用GSAP、Anime.js等专业动画库简化复杂动画实现。这些库提供更丰富的功能和更好的性能优化。
// 使用GSAP实现帧动画
gsap.to(".element", {
keyframes: [
{x: 0, duration: 0.2},
{x: 100, duration: 0.2},
{x: 50, duration: 0.2}
],
repeat: -1
});性能优化注意事项
减少重绘和回流，优先使用CSS动画和transform属性。对移动设备考虑减少帧数或使用will-change提示浏览器优化。避免同时运行过多动画，复杂场景考虑使用Canvas或WebGL方案。
// 优化示例：使用will-change和transform
element.style.willChange = 'transform';
element.style.transform = 'translateX(100px)';
