AnimationClip.trim()

概述

AnimationClip.trim() 方法是 three.js 中 AnimationClip 类的一个实例方法，用于裁剪动画片段的起始和结束。

语法

AnimationClip.trim( start?: number, end?: number ): AnimationClip;

参数

• start：可选参数，需要裁剪的动画起始时间。默认为 0。
• end：可选参数，需要裁剪的动画结束时间。默认为动画片段的最大时间。

返回值

AnimationClip 类型对象，表示经过裁剪的动画片段。

用法

import { AnimationClip } from 'three';

const animation = new AnimationClip();
// 添加动画轨道
// ...

const trimmedAnimation = animation.trim(1, 3);

上述代码中，创建了一个空的 AnimationClip 对象，并向其中添加了一些动画轨道。然后，通过调用 trim() 方法将动画片段裁剪为 1s 到 3s。

示例

import { AnimationClip, VectorKeyframeTrack } from 'three';

const animation = new AnimationClip('test', 1, [
  new VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 1, 1, 1, 2, 2, 2]),
  new VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1])
]);

// 裁剪前动画片段的时长是 3 秒
console.log(animation.duration); // 3

const trimmedAnimation = animation.trim(1, 2);
console.log(trimmedAnimation.duration); // 1

// 将裁剪后的动画片段播放
// ...

上述代码中，创建了一个动画片段，其中包含两个轨道：.position 和 .scale。轨道的关键帧分别为 (0, 1, 2) 和 (1, 2, 3)，时间线上的变化为：

• .position: (0,0,0) -> (1,1,1) -> (2,2,2)
• .scale: (1,1,1) -> (2,2,2) -> (1,1,1)

然后通过调用 trim() 方法，将动画片段裁剪为 1s 到 2s，得到了一个新的动画片段 trimmedAnimation。最后，输出裁剪后的动画片段时长，该结果为 1。

注意事项

• start 和 end 参数要求在动画片段的时间范围内，否则会抛出异常。
• 裁剪后的动画片段的实际时长可能不足指定的时间范围，因此需要通过 duration 属性获取其正确的时长。