js实现animate
实现动画的方法
使用 CSS 动画和 JavaScript 控制
CSS 提供了 @keyframes 和 animation 属性，可以轻松创建动画效果。JavaScript 可以用来动态添加或移除 CSS 类，从而触发动画。
/* 定义动画 */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 应用动画 */
.slide-in {
animation: slideIn 1s ease-out;
}// 通过 JavaScript 触发动画
const element = document.getElementById('myElement');
element.classList.add('slide-in');
// 移除动画类
element.addEventListener('animationend', () => {
element.classList.remove('slide-in');
});使用 JavaScript 的 requestAnimationFrame
requestAnimationFrame 是浏览器提供的原生 API，适合需要精细控制的动画场景。
function animateElement(element, duration) {
const start = performance.now();
const startX = 0;
const endX = 200;
function step(timestamp) {
const elapsed = timestamp - start;
const progress = Math.min(elapsed / duration, 1);
const currentX = startX + (endX - startX) * progress;
element.style.transform = `translateX(${currentX}px)`;
if (progress < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
const box = document.getElementById('box');
animateElement(box, 1000);使用 Web Animations API
现代浏览器支持 Web Animations API，可以直接通过 JavaScript 创建和控制动画。
const element = document.getElementById('myElement');
const animation = element.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' }
],
{
duration: 1000,
easing: 'ease-in-out',
iterations: 1
}
);
// 监听动画事件
animation.onfinish = () => {
console.log('Animation finished');
};使用第三方库（如 GSAP、anime.js）
第三方库提供了更丰富的功能和更简单的 API，适合复杂动画场景。
GSAP 示例：
gsap.to("#box", {
x: 100,
duration: 1,
ease: "power2.out"
});anime.js 示例：
anime({
targets: '#box',
translateX: 100,
duration: 1000,
easing: 'easeOutExpo'
});性能优化建议
- 优先使用 CSS 动画，因为浏览器可以优化硬件加速。
- 避免频繁操作 DOM，尤其是在动画循环中。
- 使用
will-change属性提示浏览器元素将发生变化，例如will-change: transform。 - 对于需要高性能的动画，考虑使用
transform和opacity，因为它们不会触发重排。
浏览器兼容性
- CSS 动画和
requestAnimationFrame在现代浏览器中广泛支持。 - Web Animations API 在较新的浏览器中支持良好，但旧版本可能需要 polyfill。
- 第三方库通常会处理兼容性问题，适合需要广泛支持的项目。
