js实现animation
JavaScript 动画实现方法
使用 requestAnimationFrame
requestAnimationFrame 是浏览器提供的 API，适合实现高性能动画。它会在浏览器重绘前执行回调函数，确保动画流畅。
function animate() {
const element = document.getElementById('box');
let position = 0;
function step(timestamp) {
position += 1;
element.style.left = position + 'px';
if (position < 200) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
animate();使用 CSS transition 与 JavaScript 结合
通过 JavaScript 修改 CSS 属性，利用 CSS 的过渡效果实现动画。
const element = document.getElementById('box');
element.style.transition = 'left 1s ease-in-out';
element.style.left = '200px';使用 CSS @keyframes 与 JavaScript 结合
定义关键帧动画并通过 JavaScript 触发。
@keyframes slide {
from { left: 0; }
to { left: 200px; }
}const element = document.getElementById('box');
element.style.animation = 'slide 1s ease-in-out';使用 setInterval 或 setTimeout
虽然不推荐用于复杂动画，但简单动画仍可使用。
function animate() {
const element = document.getElementById('box');
let position = 0;
const interval = setInterval(() => {
position += 1;
element.style.left = position + 'px';
if (position >= 200) clearInterval(interval);
}, 10);
}
animate();使用第三方库（如 GSAP）
GSAP 提供了强大的动画功能，适合复杂场景。
gsap.to('#box', { duration: 1, x: 200, ease: 'power2.out' });动画性能优化建议
- 优先使用
requestAnimationFrame或 CSS 动画。 - 避免频繁操作 DOM，使用
transform和opacity属性。 - 减少动画元素的数量，必要时使用
will-change提示浏览器优化。
注意事项
- 确保动画在移动设备上流畅，测试不同设备的性能。
- 考虑用户偏好，提供关闭动画的选项（如
prefers-reduced-motion）。
