跳到主要内容

动画

动画（Animation）在 Tinoe 中的本质是一个状态机，生产的是当前 frameTime 时刻下的数据值，通常包含轨迹动画和帧动画两种。

示例​

常用类型​

轨迹动画​

轨迹动画顾名思义，即预先知道动画的轨迹方程，可通过轨迹方程equation和动画结束时间endTime创建动画片段：

const clip = new LocusAnimationClip({
  //轨迹方程，参数是 frameTime（当前累计帧时间）,输出是任意的值
  equation: frameTime => {
    return [frameTime % 10, frameTime % 10, frameTime % 10];
  },
  //动画结束时间
  endTime: 10,
  //时间方程，控制时间的变化速度，真正的时间流速不变，参考 Ease 函数，默认是线性变换
  timeEquation: Ease.linear,
  //动画在每帧生成值后的回调，入参是轨迹方程输出的值，即equation生成的值
  onUpdate: value => {
    mesh.position.set(value[0], value[1], value[2]);
  },
});

帧动画​

帧动画是只知道特定时间点状态的动画，可直接通过关键帧信息创建动画片段，默认为线性插值：

const clip = new InterpolationAnimationClip({
    //插值方程，参数是 alpha（当前时间在前后两帧之间所占的比例，0 ～ 1）和前后两帧的状态值，输出是与帧状态匹配的值
    equation: Interpolation.linear,
    //动画结束时间
    keyFrames:[
      {
        time: 0,
        value: [0, 0, 0],
      },
      { time: 1, value: [1, 1, 1] },
    ],
    //时间方程，控制时间的变化速度，真正的时间流速不变，参考 Ease 函数，默认是线性变换
    timeEquation: Ease.easeInOutBounce
    //动画在每帧生成值后的回调，入参是轨迹方程输出的值，即equation生成的值
    onUpdate:(value)=>{
        mesh.position.set(value[0],value[1],value[2])
    }
})

CSS 动画​

为了方便用户使用，创建动画还可以通过下面的方式，Tinoe 内部会通过参数自动创建 onUpdate 函数：

//L后缀表示轨迹动画，locus
const clip = AnimationClip.fromTranslateL(node, {
  equation,
  timeEquation,
  endTime,
});

//F后缀表示帧动画，frame
const clip = AnimationClip.fromTranslateF(node, {
  equation,
  timeEquation,
  keyFrames,
});

animationManager.add(new Animation([AnimationClip]));

如果仅仅需要创建一次性动画，可以直接使用AnimationManager创建，我们的AnimationManager作为场景的插件，由@tinoe/glk提供，一次性动画播放完毕后会自动移除：

import { AnimationManager } from '@tinoe/glk';

const animationManager = scene.addPlugin(AnimationManager);

const animation = animationManager.translateL(node, {
  equation,
  timeEquation,
  endTime,
});

API​

更多​

动画方案

Q&A​