js实现动画特效代码

JavaScript 实现动画特效可以通过多种方式，以下是一些基础概念和相关示例代码：

基础概念

帧动画：通过定时器（如 setInterval 或 requestAnimationFrame）不断更新元素的位置或样式，从而实现动画效果。
CSS 动画：利用 CSS 的 @keyframes 规则定义动画序列，然后通过 JavaScript 控制元素的类名来触发动画。
Web Animations API：这是一个现代的 JavaScript API，可以直接操作 DOM 元素的动画。

优势

灵活性：JavaScript 可以实现复杂的交互式动画。
性能优化：使用 requestAnimationFrame 可以确保动画在浏览器重绘时执行，提高性能。
跨平台兼容性：适用于各种设备和浏览器。

类型

平移动画：改变元素的水平或垂直位置。
缩放动画：改变元素的大小。
旋转动画：使元素绕其中心点旋转。
透明度变化：调整元素的透明度。

应用场景

网页导航菜单的展开和收起
轮播图的自动切换
用户交互反馈（如按钮点击后的动画效果）
数据可视化的动态图表

示例代码

以下是一个简单的平移动画示例，使用 requestAnimationFrame 来实现平滑的动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 动画示例</title>
<style>
  #box {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 0;
  }
</style>
</head>
<body>

<div id="box"></div>

<script>
  const box = document.getElementById('box');
  let start;
  const duration = 2000; // 动画持续时间 2 秒

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const distance = (progress / duration) * 300; // 移动距离 300px
    box.style.left = `${distance}px`;

    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
</script>

</body>
</html>