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

每个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()
• syncWith(otherAction)
• wrap(startTimeScale : Number, endTimeScale : Number, durationInSeconds : Number ) 在经过的时间间隔内更改播放速度

AnimationClip

表示动画的一组可重用的关键帧跟踪
构造函数
AnimationClip(name,duration,frametracks: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