111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import {Object3D, AnimationAction,LoopOnce, LoopRepeat, LoopPingPong} from "three";
|
||
import type {AnimationActionLoopStyles} from "three";
|
||
|
||
export class Animation {
|
||
object:Object3D;
|
||
actionsMap:Map<string, AnimationAction>;
|
||
lastPlayAction:AnimationAction | undefined;
|
||
// 整个动作过程动画剪辑（AnimationClip）执行的次数
|
||
repetitions:number = Infinity;
|
||
|
||
static ActionLoop = {
|
||
LoopOnce: LoopOnce,
|
||
LoopRepeat: LoopRepeat,
|
||
LoopPingPong: LoopPingPong,
|
||
}
|
||
|
||
constructor(object:Object3D) {
|
||
this.object = object;
|
||
|
||
this.actionsMap = this.getActionsMap();
|
||
}
|
||
|
||
/**
|
||
* 获取对象的AnimationActions。
|
||
* @returns AnimationAction Map.
|
||
*/
|
||
getActionsMap():Map<string, AnimationAction> {
|
||
const actionsMap = new Map<string, AnimationAction>();
|
||
const animations = this.object.animations as unknown as AnimationAction[];
|
||
if (animations.length > 0) {
|
||
for (let animation of animations ) {
|
||
actionsMap.set(animation.getClip().name, animation);
|
||
}
|
||
}
|
||
|
||
return actionsMap;
|
||
}
|
||
|
||
/**
|
||
* 返回 AnimationAction，用于用户直接调用AnimationAction的方法。
|
||
* AnimationAction 文档：https://threejs.org/docs/index.html#api/zh/animation/AnimationAction
|
||
* @param name 动画名称。
|
||
* @returns AnimationAction | undefined
|
||
*/
|
||
getAction(name:string):AnimationAction | undefined {
|
||
return this.actionsMap.get(name);
|
||
}
|
||
|
||
get actions():AnimationAction[] {
|
||
return Array.from(this.actionsMap.values());
|
||
}
|
||
|
||
/**
|
||
* 播放动画,支持链式调用
|
||
*/
|
||
play(name:string, loop:AnimationActionLoopStyles = Animation.ActionLoop.LoopRepeat, timeScale:number = 1):Animation {
|
||
const action = this.actionsMap.get(name);
|
||
if (action) {
|
||
action.paused = false;
|
||
action.repetitions = this.repetitions;
|
||
action.loop = loop;
|
||
action.timeScale = timeScale;
|
||
action.play();
|
||
|
||
this.lastPlayAction = action;
|
||
}
|
||
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 暂停动画，支持链式调用
|
||
*/
|
||
pause(name:string | undefined):Animation {
|
||
if(name === undefined){
|
||
this.lastPlayAction && (this.lastPlayAction.paused = true);
|
||
|
||
return this;
|
||
}
|
||
|
||
const action = this.actionsMap.get(name);
|
||
if (action) {
|
||
action.paused = true;
|
||
}
|
||
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 停止动画，支持链式调用
|
||
*/
|
||
stop(name:string | undefined):Animation {
|
||
if (name === undefined) {
|
||
this.lastPlayAction &&this.lastPlayAction.stop();
|
||
|
||
this.lastPlayAction = undefined;
|
||
return this;
|
||
}
|
||
|
||
const action = this.actionsMap.get(name);
|
||
if (action) {
|
||
action.stop();
|
||
}
|
||
|
||
if (this.lastPlayAction === action) {
|
||
this.lastPlayAction = undefined;
|
||
}
|
||
|
||
return this;
|
||
}
|
||
} |