js实现运动

实现运动的常见方法

使用CSS动画

CSS动画通过@keyframes定义动画序列，结合animation属性实现平滑运动效果。适用于简单、声明式的动画需求。

/* 定义动画 */
@keyframes moveRight {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 应用动画 */
.element {
  animation: moveRight 2s ease-in-out infinite;
}

使用CSS过渡

CSS过渡通过transition属性在状态改变时产生动画效果，适合交互触发的简单运动。

.element {
  transition: transform 0.5s ease;
}
.element:hover {
  transform: translateX(50px);
}

使用JavaScript定时器

通过setInterval或requestAnimationFrame逐帧修改元素属性实现运动控制，适合需要精细控制的复杂动画。

let position = 0;
const element = document.getElementById('movingElement');

function animate() {
  position += 1;
  element.style.left = position + 'px';
  if (position < 100) {
    requestAnimationFrame(animate);
  }
}
animate();

使用Web Animation API

现代浏览器支持的Web Animation API提供更强大的JavaScript动画控制能力。

const element = document.getElementById('animatedElement');
element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  iterations: Infinity
});

使用第三方动画库

GSAP、Anime.js等专业动画库提供更丰富的功能和跨浏览器兼容性。

// 使用GSAP示例
gsap.to(".box", {
  x: 100,
  duration: 1,
  repeat: -1,
  yoyo: true
});

性能优化建议

• 优先使用CSS硬件加速属性（如transform、opacity）
• 避免频繁触发重排（reflow）的操作
• 使用will-change提示浏览器优化
• 对复杂动画考虑使用Web Worker

运动类型扩展

• 缓动函数：使用cubic-bezier()自定义运动曲线
• 物理动画：模拟重力、弹力等物理效果
• 路径动画：沿SVG路径运动
• 3D变换：通过transform-style: preserve-3d实现三维运动