2021SC@SDUSC山东大学软件学院软件工程应用与实践——claygl（源码分析1）
2021SC@SDUSC
目录
二. clay.animation.Animator类的作用
三. clay.animation.Animator类源码分析
1. new Animator(target, loop, getter, setter, interpolater)
2. delay(time) → {clay.animation.Animator}
3. done(func) → {clay.animation.Animator}
4. during(callback) → {clay.animation.Animator}
6. start(easing) → {clay.animation.Animator}
8. then(time, props, easingopt) → {clay.animation.Animator}
9. when(time, props, easingopt) → {clay.animation.Animator}
一. clay.animation.Animator类概述
Animator 对象只能通过 Animation.prototype.animate 方法创建。创建后，我们可以使用clay.animation.Animator#when方法来添加所有关键帧,并使用clay.animation.Animator#start来启动它。通过运行该方法，剪辑将自动创建并添加到创建此延迟对象的动画实例中。
二. clay.animation.Animator类的作用
通过Animator类，我们可以创建一个动画，并对该动画进行修改，包括添加帧，删除帧，开始动画，结束动画等操作，当完成对动画的设置后，即可运行代码，实现claygl模型动画的实现，为模型添加动态效果。
三. clay.animation.Animator类源码分析
1. new Animator(target, loop, getter, setter, interpolater)
该函数为Animator的构造函数，其参数及类型为：
| Name | Type |
| target | Object |
| loop | boolean |
| getter | function |
| setter | function |
| interpolater | function |
其源码如下：
function Animator(target, loop, getter, setter, interpolater) {
this._tracks = {};
this._target = target;
this._loop = loop || false;
this._getter = getter || defaultGetter;
this._setter = setter || defaultSetter;
this._interpolater = interpolater || null;
this._delay = 0;
this._doneList = [];
this._onframeList = [];
this._clipList = [];
this._maxTime = 0;
this._lastKFTime = 0;
}
从源码中可以看出，Animator类内共有12个成员变量，在构造函数中可接收5个参数，其中，target为必备的参数，其余参数为可选参数，具体情况如下：
| 参数 | 是否必备 | 默认值 | 作用 |
| target | 是 | 动画的目标节点 | |
| loop | 否 | false | 循环播放 |
| getter | 否 | defaultGetter | getter方法 |
| setter | 否 | defaultSetter | setter方法 |
| interpolater | 否 | null |
2. delay(time) → {clay.animation.Animator}
该函数可根据输入的毫秒数进行延迟执行
参数time为延迟的时间，单位是毫秒，类型为number。
其源代码为：
delay: function (time){
this._delay = time;
return this;
}
当执行该函数时，Animator对象会将成员变量delay的值设置为输入的time时间，并返回当前对象，实现延迟效果
3. done(func) → {clay.animation.Animator}
该函数为动画结束后的回调函数，当动画完成时执行该函数
参数func为动画完成时，所需执行的函数或行为，类型为function
其源代码为：
done: function (func) {
if (func) {
this._doneList.push(func);
}
return this;
}
当执行done函数时，会判断是否设置了回调函数func，若设置了，则将func加入到成员变量doneList列表中，并返回当前对象，当动画结束后，则会执行doneList数组中的方法，可添加多个func函数。
4. during(callback) → {clay.animation.Animator}
该函数为运行动画时的回调函数，当动画运行时执行该函数
参数callback为动画运行时，所运行的回调函数，类型为function，callback有两个参数，即动画的目标以及触发该回调函数的动画百分比
其源代码为：
during: function (callback) {
this._onframeList.push(callback);
return this;
}
当执行during函数时，会往成员变量onframeList数组中添加回调函数callback，并返回该对象。在动画运行到callback函数指定的某一阶段百分比时，执行该callback函数，可添加多个callback函数。
5. getClips() → {Array.<clay.animation.Clip>}
该函数获取start方法创建的所有剪辑，在执行start方法后，获取创建的所有剪辑
该函数无形式参数
其源代码为：
getClips: function () {
return this._clipList;
}
该函数将clipList中所有的剪辑进行返回，从而获取start函数调用后，clipList里面所添加的所有剪辑
6. start(easing) → {clay.animation.Animator}
该函数为启动动画的函数，当执行该函数时执行动画
参数easing
其源代码为：
start: function (globalEasing) {
var self = this;
var clipCount = 0;
var oneTrackDone = function() {
clipCount--;
if (clipCount === 0) {
self._doneCallback();
}
};
var lastClip;
var clipMaxTime = 0;
for (var propName in this._tracks) {
var clip = createTrackClip(
this, globalEasing, oneTrackDone,
this._tracks[propName], propName, self._interpolater, self._maxTime
);
if (clip) {
clipMaxTime = Math.max(clipMaxTime, clip.life);
this._clipList.push(clip);
clipCount++;
// If start after added to animation
if (this.animation) {
this.animation.addClip(clip);
}
lastClip = clip;
}
}
当执行start函数时，创建一个self变量并将当前动画对象赋值给self，同时创建局部变量clipCount并赋值为0。
此时定义一个函数oneTrackDone，其作用是将clipCount变量自减，并判断clipCount是否全等于0，若全等于0则执行_doneCallback函数，doneCallback函数如下：
doneCallback: function () {
// Clear all tracks
this._tracks = {};
// Clear all clips
this._clipList.length = 0;
var doneList = this._doneList;
var len = doneList.length;
for (var i = 0; i < len; i++) {
doneList[i].call(this);
}
}
doneCallback函数首先将成员变量track设置为空，并将clipList的长度设置为0。创建一个doneList局部变量，并赋值本对象的成员变量doneList，同时创建len局部变量并赋值doneList的长度，通过for循环，对本对象执行doneList数组的每一个方法。
结合来看，oneTrackDone函数的作用是不断地对clipCount进行自减，当自减至0时，执行动画结束时的回调函数数组的所有函数。
下面，定义局部变量lastclip，以及clipMaxTime（赋值为0）。对本对象的局部变量_tracks对象的所有属性进行遍历。在每一次遍历中，首先调用createTrackClip函数，createTrackClip函数如下：
function createTrackClip(animator, globalEasing, oneTrackDone, keyframes, propName, interpolater, maxTime) {
var getter = animator._getter;
var setter = animator._setter;
var useSpline = globalEasing === 'spline';
var trackLen = keyframes.length;
if (!trackLen) {
return;
}
// Guess data type
var firstVal = keyframes[0].value;
var isValueArray = isArrayLike(firstVal);
// For vertices morphing
var arrDim = (
isValueArray
&& isArrayLike(firstVal[0])
)
? 2 : 1;
// Sort keyframe as ascending
keyframes.sort(function(a, b) {
return a.time - b.time;
});
// Percents of each keyframe
var kfPercents = [];
// Value of each keyframe
var kfValues = [];
// Easing funcs of each keyframe.
var kfEasings = [];
var prevValue = keyframes[0].value;
var isAllValueEqual = true;
for (var i = 0; i < trackLen; i++) {
kfPercents.push(keyframes[i].time / maxTime);
// Assume value is a color when it is a string
var value = keyframes[i].value;
// Check if value is equal, deep check if value is array
if (!((isValueArray && isArraySame(value, prevValue, arrDim))
|| (!isValueArray && value === prevValue))) {
isAllValueEqual = false;
}
prevValue = value;
kfValues.push(value);
kfEasings.push(keyframes[i].easing);
}
if (isAllValueEqual) {
return;
}
var lastValue = kfValues[trackLen - 1];
// Polyfill array and NaN value
for (var i = 0; i < trackLen - 1; i++) {
if (isValueArray) {
fillArr(kfValues[i], lastValue, arrDim);
}
else {
if (isNaN(kfValues[i]) && !isNaN(lastValue)) {
kfValues[i] = lastValue;
}
}
}
isValueArray && fillArr(getter(animator._target, propName), lastValue, arrDim);
// Cache the key of last frame to speed up when
// animation playback is sequency
var cacheKey = 0;
var cachePercent = 0;
var start;
var i, w;
var p0, p1, p2, p3;
var onframe = function(target, percent) {
// Find the range keyframes
// kf1-----kf2---------current--------kf3
// find kf2(i) and kf3(i + 1) and do interpolation
if (percent < cachePercent) {
// Start from next key
start = Math.min(cacheKey + 1, trackLen - 1);
for (i = start; i >= 0; i--) {
if (kfPercents[i] <= percent) {
break;
}
}
i = Math.min(i, trackLen - 2);
}
else {
for (i = cacheKey; i < trackLen; i++) {
if (kfPercents[i] > percent) {
break;
}
}
i = Math.min(i - 1, trackLen - 2);
}
cacheKey = i;
cachePercent = percent;
var range = (kfPercents[i + 1] - kfPercents[i]);
if (range === 0) {
return;
}
else {
w = (percent - kfPercents[i]) / range;
// Clamp 0 - 1
w = Math.max(Math.min(1, w), 0);
}
w = kfEasings[i + 1](w);
if (useSpline) {
p1 = kfValues[i];
p0 = kfValues[i === 0 ? i : i - 1];
p2 = kfValues[i > trackLen - 2 ? trackLen - 1 : i + 1];
p3 = kfValues[i > trackLen - 3 ? trackLen - 1 : i + 2];
if (interpolater) {
setter(
target,
propName,
interpolater(
getter(target, propName),
p0, p1, p2, p3, w
)
);
}
else if (isValueArray) {
catmullRomInterpolateArray(
p0, p1, p2, p3, w, w*w, w*w*w,
getter(target, propName),
arrDim
);
}
else {
setter(
target,
propName,
catmullRomInterpolate(p0, p1, p2, p3, w, w*w, w*w*w)
);
}
}
else {
if (interpolater) {
setter(
target,
propName,
interpolater(
getter(target, propName),
kfValues[i],
kfValues[i + 1],
w
)
);
}
else if (isValueArray) {
interpolateArray(
kfValues[i], kfValues[i+1], w,
getter(target, propName),
arrDim
);
}
else {
setter(
target,
propName,
interpolateNumber(kfValues[i], kfValues[i+1], w)
);
}
}
};
该函数的作用是创建一个动画剪辑。在start成员方法的源代码中，对于_tracks字典里面的每一个键值对对象，创建该对象的一个剪辑，并赋值给clip局部变量，如果clip对象不为空，则与之前创建的剪辑中时间最长的剪辑作比较，若该剪辑的时间更长，则将其时间赋值给clipMaxTime，否则clipMaxTime维持最大值。然后将该剪辑放进_clipList数组中，对clipCount进行自增，表示添加一个剪辑。同时判断本对象的animation是否存在，若存在，则将该剪辑也加入到animation中。最后设置本对象的lastclip为clip，表示该clip剪辑为最后一个剪辑。
当剪辑组不为空，及最后一个剪辑存在时，创建一个局部变量oldOnFrame，并将最后一个剪辑的onframe赋给oleOnFrame，随后定义一个构造函数onframe(target,percent),该构造函数首先对oldOnFrame进行执行，传入参数为形参target和percent，然后，对本对象的_onframeList数组进行遍历，并通过target和percent参数执行onframeList的每一个方法，目的在于执行_onframeList中的每一个动画，从而实现动画开始效果。
最后，判断clipCount是否不为0，如果不为0，表示还有剪辑，直接退出并返回本对象，若为0则说明动画剪辑已经播放结束，执行动画结束的函数回调，即_doneCallback（）方法，该方法代码如下：
_doneCallback: function () {
// Clear all tracks
this._tracks = {};
// Clear all clips
this._clipList.length = 0;
var doneList = this._doneList;
var len = doneList.length;
for (var i = 0; i < len; i++) {
doneList[i].call(this);
}
}
_doneCallback（）方法将本对象的_tracks字典清空，并将_clipList的长度设置为0；并获取_doneList对象和其长度，赋值给doneList和len局部变量，通过这两个变量，通过for循环函数逐个调用doneList中的方法。
可见，最后一步的目的是判断动画是否播放完毕，若播放完毕则执行播放完毕后所有的回调函数，并返回本对象，若未播放完毕，则直接返回本对象。
7. stop()
该函数为停止动画的函数，当执行该函数时停止动画
无需传入参数
其源代码为：
stop: function () {
for (var i = 0; i < this._clipList.length; i++) {
var clip = this._clipList[i];
this.animation.removeClip(clip);
}
this._clipList = [];
}
当执行该函数后，该函数会对本对象的clipList数组进行遍历，对于clipList中的每一个对象，创建一个clip局部变量并赋值给clip，同时在正在播放的animation动画对象中移除与clip一样的对象，当移除animation所有的clip对象后，清空clipList。
该方法的目的是使animation正在播放的动画剪辑对象清空，从而实现动画的停止播放
8. then(time, props, easingopt) → {clay.animation.Animator}
该函数为在动画的末尾加上一段动画，及增加动画的时间，增加新的动画
该函数共有三个参数，分别为：
time：类型为number，表示自最后一个动画关键帧之后的时间
props：类型为对象，是一个键值对对对象，值可以为数字，一位数组和二维数组，表示动画执行的对象
easing：类型为string或function，表示动画的执行脚本
该函数的源代码如下：
then: function (duringTime, props, easing) {
this.when(duringTime + this._lastKFTime, props, easing);
this._lastKFTime += duringTime;
return this;
}
首先，该函数调用本函数的when方法，传入的参数为输入的时间duringTime加上本对象的_lastKFTime的值，表示在原动画的末尾添加动画，而props和easing则是直接传入形参props和easing，when的用法具体如下。
当使用了when追加动画后，则需要将本对象的_lastKFTime结束结束时间加上新增加动画的时间，最后返回本对象
9. when(time, props, easingopt) → {clay.animation.Animator}
该函数为在已创建的动画中插入一段新的动画的函数，在输入相应的参数并执行该函数后，在指定的time时刻上插入一段动画
该函数共有三个参数，分别为：
time：类型为number，表示插入关键帧的时刻
props：类型为对象，是一个键值对对对象，值可以为数字，一位数组和二维数组，表示动画执行的对象
easing：类型为string或function，表示动画的执行脚本
该函数的源代码如下：
when: function (time, props, easing) {
this._maxTime = Math.max(time, this._maxTime);
easing = (typeof easing === 'function' ? easing : easingFuncs[easing]) || noopEasing;
for (var propName in props) {
if (!this._tracks[propName]) {
this._tracks[propName] = [];
// If time is 0
// Then props is given initialize value
// Else
// Initialize value from current prop value
if (time !== 0) {
this._tracks[propName].push({
time: 0,
value: cloneValue(
this._getter(this._target, propName)
),
easing: easing
});
}
}
this._tracks[propName].push({
time: parseInt(time),
value: props[propName],
easing: easing
});
}
return this;
}
首先，该函数首先将输入的时刻与原动画截止的时间进行比较，并将其值大的变量赋值给本对象的截止时间_maxTime。
然后，对easing进行判断，若是function函数，则将easingFuncs[easing]对象赋给easing，否则，若是string字符串，则维持自身，若easing为null，则设置easing为默认值noopeasing。
接下来，则是对props对象中的键值对进行不断遍历。首先获取props对象中的键key，判断本对象的_track字典中是否有对应该key下的对象，如果没有，则创建_track下的同名称键，并设置值为空数组。同时，若时间为0，则给props一个初始值，否则，从当前属性初始化值，即若是time不全等于0，则初始化其time为0，值value为从本对象的_getter中克隆而来的对应key下的value，同时设置初始的easing为局部变量easing。否则，则从当前属性初始化值，设置对应_track下对应key的值，time为形参中的time并对其格式化为整数，value为对应props下的value，easing为局部变量easing。最后返回本对象。
因此，通过该操作，可以通过指定time在特定的时间内插入动画，而动画的方法有props和easing进行决定。