红宝书第四十四讲：基于红宝书的两个动画库介绍

---

红宝书第四十四讲：基于红宝书的两个动画库介绍 ¹²

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、Anime.js：轻量级动画利器 ¹

核心特点（来自资料1）：

1. 全能动画支持：可操控CSS样式、DOM属性、SVG路径数据  📦
2. 极简API设计：通过链式语法控制动画时间轴
3. 应用场景举例：网页元素淡入/出、物体旋转移动、进度条加载

基础使用步骤：

flowchart TB
    A[导入Anime.js库] --> B[选择目标元素]
    B --> C[定义动画参数]
    C -->|包含| D[持续时间]
    C -->|包含| E[缓动函数]
    C -->|包含| F[CSS属性变化]
    C -->|包含| G[DOM属性变化]
    C --> H[创建动画实例]
    H --> I[执行动画.start]

示例代码（假设让方块淡入）：

anime({
  targets: '.box',      // 目标元素选择器
  opacity: [0, 1],      // 透明度从0到1
  duration: 1000,       // 动画持续1秒
  easing: 'easeInOutQuad' // 使用贝塞尔缓动函数
});

---

二、three.js：闯入3D世界的钥匙 ²³

核心能力（根据资料2）：

1. WebGL抽象层：将复杂的WebGL API简化为易用的对象模型
2. 跨平台3D渲染：支持桌面与移动端的3D图形生成
3. 生态丰富：预设几何体、材质库、光照模拟系统 🎮

创建简单3D场景流程：

flowchart LR
    A[初始化场景 Scene] --> B[创建摄像机 Camera]
    B --> C[创建几何体 Geometry]
    C --> D[创建材质 Material]
    D --> E[组合成网格 Mesh]
    E --> F[添加到场景]
    F --> G[创建渲染器 WebGLRenderer]
    G --> H[设置画布尺寸]
    H --> I[启动渲染循环]
    I --> J{持续执行}
    J -->|是| K[更新场景属性]
    K --> I

    subgraph 物体创建
        C
        D
        E
    end

    subgraph 渲染设置
        G
        H
    end

基础代码框架（结合资料6的WebGL上下文）：

// 初始化WebGL渲染器
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas') // 关联Canvas元素
});

const scene = new THREE.Scene(); // 创建场景
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);

const geometry = new THREE.BoxGeometry(); // 立方体几何形状
const material = new THREE.MeshPhongMaterial({color: 0x00ff00}); // 材质
const cube = new THREE.Mesh(geometry, material);

scene.add(cube); // 添加立方体到场景
camera.position.z = 5; // 调整摄像机位置

// 动画循环（参考requestAnimationFrame）
function animate() {
  cube.rotation.x += 0.01; // 每帧旋转立方体
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate(); 

---

三、Anime.js与three.js关键差异 [对比]

比较维度	Anime.js	three.js
渲染技术	依赖DOM或CSS	基于WebGL的3D图形管道
使用复杂度	简单快捷	需理解三维坐标系/材质/光照
典型用途	网页交互动画	游戏/工业模型/虚拟现实场景
性能重点	DOM操作优化	GPU计算的吞吐效率

---

目录：总目录
上篇文章：红宝书第四十三讲：基于资料的数据可视化工具简单介绍：D3.js 与 Canvas绘图

下篇文章：红宝书第四十五讲：状态管理核心工具详解：RxJS & Redux & MobX的奇妙世界

脚注

---

1. 《JavaScript高级程序设计（第5版）》说明Anime.js能够控制CSS、DOM、SVG及JavaScript对象动画 ↩
2. 《JavaScript高级程序设计（第5版）》指出three.js是主流WebGL库，支持复杂3D动画 ↩
3. 《JavaScript高级程序设计（第5版）》提示three.js底层依赖WebGL上下文管理3D渲染管线 ↩