【threejs】补间动画

介绍

补间动画是指在一定时间内，从一个状态过渡到另一个状态的动画效果。在 threejs 中，可以使用 Tween.js 库来实现补间动画，也可以使用 GSAP 库，后续将使用 GSAP 来实现动画效果。

GSAP

GSAP 是一个强大的动画库，它可以实现各种复杂的动画效果，它不仅可以操作 DOM 元素，还可以操作数据对象。

安装

1
npm install gsap

引入

1
import { gsap } from "gsap";

常用 API

to

设置目标状态，从当前状态过渡到目标状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const tween = gsap.to(".box", {
  // 设置属性，如果是操作DOM元素，可设置CSS属性；如果是操作数据对象，可设置数据属性（目标值）
  x: 100,
  opacity: 1,
  // 动画配置，gsap提供的配置属性（可选）
  duration: 1, // 动画时长（秒）
  ease: "power1.inOut", // 缓动函数 https://gsap.com/docs/v3/Eases/
  repeat: -1, // 重复次数（-1 无限循环）
  delay: 1, // 延迟时间（秒）
  yoyo: true, // 往返运动
  paused: true, // 是否暂停，适用于一开始不执行，通过某种交互手动触发动画
  onStart() {
    // 动画开始回调函数
    console.log("动画开始");
  },
  onUpdate() {
    // 动画正在更新
    console.log("动画更新中...");
  },
  onComplete() {
    // 动画完成回调函数
    console.log("动画完成");
  },
});
tween.play(); // 播放动画
tween.pause(); // 暂停动画
tween.resume(); // 恢复动画
tween.reverse(); // 反向播放动画
tween.restart(); // 重新播放动画

form

设置目标状态，从目标状态过渡到当前状态

1
2
3
gsap.from(".box", {
  // 参考 to
});

formTo

指定起始状态到目标状态

1
2
3
4
5
6
7
8
9
gsap.fromTo(
  ".box",
  {
    // 参考 to
  },
  {
    // 参考 to
  }
);

set

设置元素的属性值，不产生动画效果

1
gsap.set(".box", { color: "#f00" });

timeline

创建时间轴，用于控制动画的顺序，不需要手动计算延迟时间，可以更好的编排动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const tl = gsap.timeline();

// 前两个参数参考 gsap.to()，可以链式调用
// 时间轴第三个参数详解：

// 1秒后执行动画
tl.to(".box", { x: 100, duration: 2 }, 1);

// 与上一个动画同时执行
tl.to(".box", { x: 100, duration: 1 }, "<");

// 上个动画执行完后再执行（默认）
tl.to(".box", { x: 100, duration: 1 }, ">");

// 上个动画结束后 1秒 再执行
tl.to(".box", { x: 100, duration: 1 }, "+=1");

// 上个动画结束前 1秒 再执行
tl.to(".box", { x: 100, duration: 1 }, "-=1");

tl.from();
tl.fromTo();
tl.set();

与 threejs 结合

示例：将摄像机从 x 轴 0 移动到 x 轴 5，持续时间为 2 秒（完成补间动画）。

1
2
3
4
5
6
7
8
9
10
11
import { gsap } from "gsap";
import * as THREE from "three";

// 省略其他代码...

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

gsap.to(camera.position, {
  x: 5,
  duration: 2,
});