动画

利用物体对象在不同时间段的属性变化，创造出动画效果，动画类型主要包括位置动画、旋转动画、绘制动画。

模型动画

当用外部软件（例如Blender）创建动画时，通常会有两种主要的定义动画的方式：

变形动画

通过变形目标，你可以定义网格经过变形之后的版本，或者说关键位置。对于这个变形的目标，其所有顶点位置都会被存储下来。要让图形动起来，你所要做的只是将所有顶点从一个位置，移动到另一个关键位置，并重复该过程。

骨骼动画

通过骨骼动画可以定义骨骼，即网格的骨头，并把顶点绑定到特定的骨头上。现在，当移动一块骨头时，任何相连的骨头都会做相应的移动，骨头上绑定的顶点也会随之移动。网格的变形基于骨头的位置、移动和缩放比例。

TWEEN

VT支持three.js的Animation动画，内置了TWEEN动画库，推荐使用TWEEN创建动画，TWEEN具体用法详见TWEEN。

TWEEN以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration)，之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。

使用方法

常见使用方法需要预先定义好物体某个属性的初始值和结束值、持续时间、重复次数（repeat）、是否往返（yoyo）、更新方法(onUpdate)，然后开始（start）。

以下以呼吸动画、旋转动画、悬浮动画为例。

呼吸动画

// 动画参数
const option = {
    opacity: 0.1, 
    duration: 1000, // ms
}

// 创建动画
new VT.TWEEN.Tween({opacity: 1})
    .to(option, option.duration)
    .onUpdate(function({opacity}) {
        box.style.opacity = opacity;
    })
    .repeat(Infinity)
    .yoyo(true)
    .start();

悬浮动画

// 动画参数
const option = {
    position: {x: 0, y: 0.5, z: 0}, 
    duration: 500, // ms
}

// 创建动画
new VT.TWEEN.Tween(box.position)
    .to(option.position, option.duration)
    .repeat(Infinity)
    .yoyo(true)
    .start();

旋转动画

// 动画参数
const option = {
    rotation: {x: 0, y: Math.PI * 2, z: 0}, 
    duration: 3000, // ms
}

// 创建动画
new VT.TWEEN.Tween(box.rotation)
    .to(option.rotation, option.duration)
    .onUpdate(function({x, y, z}) {
        box.rotation.set(x, y, z);
    })
    .repeat(Infinity)
    .start();