动画 Animation

1. 动画方案

1.1 手动管理

通过手动管理顶点坐标或对物体进行平移, 旋转, 缩放等操作来实现动画效果

可以动态修改物体顶点数据如position或

1.2 动画库

动画库选择思路:

体积小, 功能强大, 性能极高, API简单易用

• gsap.js

• tween.js

支持 dom, css, canvas, svg等技术实现

• gsap.js

• tween.js

支持非常多的框架, 如 vue, react, svelte等

• gsap.js

• tween.js

支持帧动画, 贝塞尔曲线等

• gsap.js

• tween.js

应用广泛, 可用于游戏开发

• gsap.js

• tween.js

推荐:

• gsap.js

  更新比较持续稳定

  star数 16.6k (截止2023-7-1)

  支持插件系统, 如滚动, 惯性插件, 绘制svg, 物理属性模拟等

  gsap API 速查表

  不使用 MIT 开源协议, 拥有标准免费授权和商业授权, 参见授权类型

  全英文文档, 但几乎都能看懂

• tween.js

  最近更新比较频繁, 2020-10 ~ 2023-4 有过暂停更新

  star数 9.3k (截止2023-7-1)

  MIT 开源协议

  拥有中文文档

2. gsap 动画库基本使用

• 完整官方文档
• GSAP速查表
• 安装方法

GSAP 是个业界知名的动画库，有超过1100万个网站在使用，而且有超过50%的获奖的网站都是用了它。不管你是想要页面元素产生动画, 还是绘制svg动画, 甚至可以在 vue组件, react组件, 或者是 Three.js 中都能使用它来创建震撼的动画效果.

简单使用

gsap.to('.box', { x: 100 });

此动画可以让 .box 元素移动到 x 为 100 这个位置, 等同于 transform: translateX(100px)

gsap 动画基本语法

注意看, 其中有3个概念:

• 方法 (to):

  • to: 让元素属性从初始状态过渡到目标状态
  • from: to方法的逆操作, 从目标状态变化到初始状态
  • fromTo: 自己定义两个状态, 从前1个状态变化到第2个状态
  • set: 直接从初始状态变化到目标状态, 没有中间的过渡及动画效果, 就是to方法duration为0

• 目标元素 (target):

  • 支持css选择器, 可以是id或者class, 也支持复杂的 css 选择器, 如 gsap.to('header > .content', { x: 100 })
  • 支持多个目标元素, 可以传数组, 如 gsap.to(['.box', '.content'], { x: 100 })

3. 变化数据

哪些属性可以变化?

答案是几乎都能, 包括css属性, css变量, 字符串等

常用的属性有:

• transform
• rotate
• scale
• color
• padding
• margin
• background
• svg attributes
• ...

在threejs中应用动画

报名课程后可查看完整文档

4. 特殊属性

属性	类型	作用
duration	number	动画变化的时长（秒）默认是0.5
delay	number	动画变化开始前的延迟时长（秒）
repeat	number	动画的重复次数
yoyo	boolean	如果设置为 ture，那么动画会在执行完之后再反向执行，就像悠悠球的效果，默认是false
stagger	number	如果有多个元素同时要被驱动，那么当这个属性设置了时间的值之后，元素们会被依次逐个驱动，间隔时长就是这个属性设置的时长
ease	string	动画过渡的运动曲线的设置，默认是"power1.out"
onStart	function	动画开始时执行的回调函数
onComplete	function	动画结束时执行的回调函数
onUpdate	function	每帧动画的回调函数
onRepeat	function	每次动画重复时触发
onReverseComplete	function	当动画反向执行后运动到变化起始点时触发

ease:
power1.in, power1.out, power1.inOut
power2.in, power2.out, power2.inOut
power3.in, power3.out, power3.inOut
power4.in, power4.out, power4.inOut

5. 时间线动画

// 创建时间线动画
报名课程后可查看完整文档

控制动画

  // 创建 tween 变量保存对Tween或者Timeline实例的引用
  const tween = gsap.to({ x }, { duration: 1, x: 100 });

  // 暂停
  tween.pause();

  // 恢复（继续）
  tween.resume();

  // 反向变化
  tween.reverse();

  // 直接切换到整个动画变化时长的0.5秒的时间点的状态
  tween.seek(0.5);

  // 直接切换到整个变化过程的1/4的节点的状态
  tween.progress(0.25);

  // 让运动减速到0.5倍
  tween.timeScale(0.5);

  // 让变化加速到原来的2倍
  tween.timeScale(2);

  // 从头开始重新播放动画
  tween.restart();

  // 直接销毁tween实例，让垃圾回收机制可以处理该实例所占用的内存
  tween.kill();

过桥游戏场景模拟

基础版

报名课程后可查看完整文档

拆分桥面动画

报名课程后可查看完整文档

添加音效

报名课程后可查看完整文档

以上是对动画库的应用和总结, 以便于你在3d场景中快速创建想要的动画效果, 并非threejs内部提供的动画系统, 下个章节我们会继续讨论threejs动画系统

报名课程后可查看完整文档