JavaScript(JS)动画

39956 阅读 0 评论 96 点赞

上一节我们初步认识了JS中的window对象，本节我们将学习JS动画。

JS动画是一种使用JS编程语言创建动态和交互式动画的方法。JS动画可以通过许多不同的方法实现，包括使用HTML5的Canvas，SVG，或者使用第三方库如GreenSock, anime.js等。

一般来说，创建JS动画会经过以下几个基本步骤：

步骤	内容总述	具体内容
1. 规划动画类型	明确动画目标与需求	• 基础变换：位移、旋转、缩放 • 视觉效果：淡入淡出、模糊、颜色变化 • 复杂动画：物理运动、轨迹动画、序列动画
2. 选择技术方案	确定实现技术路线	• 简单动画：CSS动画/过渡 • 标准动画：Web Animations API • 复杂动画：GSAP、anime.js等专业库 • 3D/游戏：Three.js
3. 开发实现	编写动画代码逻辑	• 定义初始状态、结束状态和过渡效果 • 设置持续时间、缓动函数和触发条件 • 添加交互控制和状态回调
4. 测试优化	确保动画质量性能	• 多设备兼容性测试 • 性能分析和帧率检测 • 用户体验验证和反馈收集

下面我们通过Web Animations API（可以把它当作升级版的CSS动画）来制作一个JS动画。动画效果：绿色盒子右移，逐渐消失，重复两次。

1. Web Animations API 语法格式如下：

const animation = element.animate(keyframes, options);//关键帧参数+动画选项参数

2. 我们先来看看关键帧参数有哪些：

参数格式	功能介绍
数组格式（均匀分布）	关键帧自动在时间轴上均匀分布
数组格式（指定offset）	手动设置每个关键帧的时间位置
对象格式	为每个属性单独定义值序列
多属性关键帧	同时动画多个CSS属性
复杂变换	支持组合变换和复杂值

这里我们使用数组格式，来创建两个状态，一个是最初状态（绿色），一个是结束状态（移动位置同时透明度为0）。

[
      // 关键帧序列
      { transform: 'translateX(0px)', opacity: 1 },
      { transform: 'translateX(200px)', opacity: 0 }
]

3. 我们再看看动画参数选项有哪些：

参数	功能介绍
id	为动画设置标识符
duration	动画持续时间（毫秒）
delay	动画开始前的延迟时间
endDelay	动画结束后的延迟时间
iterations	动画重复次数
iterationStart	从哪个迭代点开始
direction	动画播放方向
easing	动画缓动时间函数
fill	动画外时间元素状态
composite	多个动画的合成方式

这里我们选择duration来控制移动时长，easing控制动画加速度的时间，通过iterations来控制动画重复次数，fill来选择动画最后的保持状态。

{
      // 动画选项
      duration: 2000,      // 持续时间 1秒
      easing: 'ease-in-out', // 缓动函数
      iterations: 2,       // 迭代次数
      fill: 'forwards'     // 动画结束后保持最终状态
 }

4. 下面我们展示一下JS动画效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dotcpp</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: greenyellow;
      margin: 200px 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    // 1. 获取元素
    const element = document.querySelector('.box');

    // 2. 创建动画
    const animation = element.animate([
      // 关键帧序列
      { transform: 'translateX(0px)', opacity: 1 },
      { transform: 'translateX(200px)', opacity: 0 }
    ], {
      // 动画选项
      duration: 2000,      // 持续时间 ２秒
      easing: 'ease-in-out', // 缓动函数
      iterations: 2,       // 迭代次数
      fill: 'forwards'     // 动画结束后保持最终状态
    });
  </script>
</body>

</html>

总结：本节我们主要讲了如何创建JS动画，以及实操了一下JS动画（绿色盒子移动），使得读者认识JS动画，以便以后设计出更加灵动的动画。