红宝书第四十四讲：基于红宝书的两个动画库Anime.js和three.js介绍

本文链接：https://blog.csdn.net/kovlistudio/article/details/147242081

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

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

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

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

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

基础使用步骤：

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

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

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

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

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

创建简单3D场景流程：

基础代码框架（结合资料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计算的吞吐效率