Three.js学习笔记-Animation(动画)

原博客地址：https://blog.csdn.net/u013270347/article/details/81178737

每个AnimationClip通常保存对象的某个活动的数据；每个动画属性的数据都存储在单独的KeyFrameTrack中；存储的数据形式仅仅是动画的基础-实际播放是由AnimationMixer动画混合器控制的;动画混合器本身只有很少的(一般的)属性和方法，因为它可以由AnimationAction操作控制；如果希望一组对象接收共享的动画状态，则可以使用AnimationObjectGroup

AnimationAction

构造函数
AnimationAction(mixer: AnimationMixer,clip:AnimationClip,localRoot: Object3D)
注意：与直接调用这个构造函数不同，您应该实例化一个带有AnimationMixer.clipAction(clip)的动画操作，因为这个方法提供了缓存，以获得更好的性能
特性
- clampWhenFinished 默认false,设置为true时,动画会自动的在最后一帧暂停，只有在最后一帧完成时才有影响，中断时不产生影响。设置为false时，enable属性会自动设置为false在最后一个循环结束的时候
- enabled： 默认true，设置为false会禁用动画,当再次设为true时从当前事件开始。注意enabled设为true不会重新加载动画。当pause为false,动画没有通过stop和reset命令来停用并且wight和timeScale不为0时，重载动画
- loop: Number 默认THREE.LoopRepeat(LoopOnce/LoopPingPong)
- paused 默认false,设为true时timeScale为0
- repetitions(默认Infinity),当Loop为为LoopOnce时无效
- time 动画的本地时间，从0开始
- timeScale 默认1，0 暂停，负值 倒着播放
- weight 影响动作的权重0-1，默认1 完全影响
- seroSlopeAtEnd/Start 默认true, 启用平滑的插值
方法
- crossFadeFrom/to(fadeoutAction,durationInSeconds,wrapBoolean)
- fadeIn/Out(durationInSeconds) 将wight从0变为1或反之
- getEffectiveTimeScale/Weight()
- getClip/Mixer/Root()
- halt(durationInSeconds) 动画速度从当前值减到0，
- isRunning()/isScheduled()/play()/reset()/setDuration()
- setLoop(LoopMode,repetitions)设置循环模式和循环次数
- startAt(startInSeconds)/stop()
- stopFading()/stopWarping()

AnimationClip

表示动画的一组可重用的关键帧跟踪
构造函数
AnimationClip(name,duration,tracks:Array)
特性
- duration 片段持续时间，单位秒，负值时通过传递的轨迹数组来计算
- name 片段名称
- tracks: Array/uuid
方法
- optimize() 在morph targert 中很常见，用来优化轨道
- resetDuration() clip的持续时间设置为其最长的Keyframetrack的持续时间
- trim() 调整所有的轨道到它的clips的持续时间
静态方法
- findByName(objOrClipArray,name): AnimationClip
- parse(json): AnimationClip
- parseAnimation(animation,bones): AnimationClip
- toJSON(clip)

AnimationMixer

当场景中的多个对象独立动画时，可以为每个对象使用一个动画混合器
构造函数
AnimationMixer(rootObject)
rootObject 要在动画混合器中播放动画的对象
特性
- time/timeScale
方法
- clipAction(clip,optionRoot: object3D) : AnimationAction clip是一个AnimationClip对象或者一个AnimationClip的名称
- existingAction (clip,optionRoot: object3D) : AnimationAction
- getRoot() 混合器的根对象
- stopAllAction(): 停用混合器上先前的所有操作
- update(deltaTimeSeconds): AnimationMixer 设定全局混合时间更新动画
- uncacheClip/Root/Action(clip/root/clip,optionsRoot) 不分配内存资源

KeyframeTrack

是一个定时的关键帧序列，由时间列表和相关值组成，用于使对象的特定属性具有动画效果
构造函数
KeyframeTrack(name,times: Array,values: Array,interpolation: Constant)
特性
- name/times: Float32Arrray /values:Float32Array/DefaultInterpolation : Constant
- TimeBufferType/ValueBufferType : Constant
方法
- createInterpolant()/getInterpolantion()/getValueSize()/setInterpolation(constant)
- shift(timeOffsetInSeconds) 在事件时向前或向后移动所有的帧

AnimationObjectGroup

限制
- 属性必须和组中的所有对象兼容；通过对象组直接控制单个属性，不能同时控制两个属性
构造函数
AnimationObjectGroup(obj1,...)
特性
- stats: object/uuid
方法
- add(obj1,…)/remove(obj1,…)/uncache(obj1,…)

AnimationUtils

内部使用的辅助动画的一种多功能的物体
方法
- arraySlice(array,from,to) 和Array.Prototype.sclice()相同
- convertArray(array,type,forceClone) 数组转特定类型
- flattenJSON(jsonKeys,times,values,valuePropertyName) 解析AOS关键帧
- getKeyframeOrder(times) 返回一个对时间和值排序的数组
- isTypedArray(object) 类型使数组返回true
- sortedArray(values,stride,order) 对getKeyframeOrder返回的数组排序

PropertyBinding

场景中引用一个真实的属性，内部使用

PropertyMixer

允许加权累加的缓冲场景图属性；内部使用

继承自KeyframeTrack

XXXXKeyframeTrack(name,times,values) 在时间上都各个属性的跟踪
name必须和跟踪的属性对应,跟踪位置 就是.position 跟踪四元数就是.quaternion 不然会出现问题

// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );

var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );

// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );

// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();

var clock = new THREE.Clock();
var animate = function(){
//controls.update();
    var delta = clock.getDelta();
    if ( mixer1 ) {
        mixer1.update( delta );
            }
    requestAnimationFrame( animate );
}


BooleanKeyFrameTrack


ColorKeyframeTrack


NumberKeyframeTrack


QuaternionKeyframeTrack


StringKeyframeTrack


VectorKeyframeTrack