Tween.js源码解读

Tween.js本身作为一个动画引擎十分强大且代码不长十分适合作为源码阅读和学习的对象。

/**
 * Tween.js - Licensed under the MIT license
 * https://github.com/sole/tween.js
 * ----------------------------------------------
 *
 * See https://github.com/sole/tween.js/graphs/contributors for the full list of contributors.
 * Thank you all, you're awesome!
 */

// Date.now shim for (ahem) Internet Explo(d|r)er



//如果Date.now方法未赋值则为其赋值
// ? 不知道针对哪种浏览器，有知道的大佬还请指出
if ( Date.now === undefined ) {

Date.now = function () {

return new Date().valueOf();

};

}

// TWEEN 对象 全局对象 存储所有Tween对象以及一些全局方法
// 有则赋值无则初始化
var TWEEN = TWEEN || ( function () {
    
    //tween 列表 new TWEEN.Tween()的对象在这里有一份储存
var _tweens = [];

return {
        // 版本号
REVISION: '14',
        // 获取全部Tween对象
getAll: function () {

return _tweens;

},
        // 清空全部Tween对象
removeAll: function () {

_tweens = [];

},
        // 手动添加Tween对象 
        // 一般无需调用 new TWEEN.Tween() 会自动调用
add: function ( tween ) {

_tweens.push( tween );

},
        // 清除指定的Tween对象
remove: function ( tween ) {

var i = _tweens.indexOf( tween );

if ( i !== -1 ) {

_tweens.splice( i, 1 );

}

},
        // 根据time更新全部Tween对象
update: function ( time ) {

if ( _tweens.length === 0 ) return false;

var i = 0;
            // 无参数输入则 返回一个毫秒数
            // window.performance.now() 返回页面初始化到该方法调用的毫秒数
            // performance.now()与Date.now()不同的是，返回了以微秒为单位的时间，更加精准
            // 与Date.now()会受系统程序执行阻塞的影响不同，performance.now()的时间是以恒定速率递增的，不受系统时间的影响(系统时间可被人为或软件调整)
time = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() );
            
            // 调用每个Tween对象的update方法
while ( i < _tweens.length ) {

if ( _tweens[ i ].update( time ) ) {

i++;

} else {
                    // 将无效的Tween对象剔除
_tweens.splice( i, 1 );

}

}

return true;

}
};

} )();

//Tween 对象
TWEEN.Tween = function ( object ) {
    // 传入的数据
var _object = object;
// 开始 值
    var _valuesStart = {};
// 结束 值
    var _valuesEnd = {};
// 开始 值 （最终过度依赖于这个值 相当于 将 _valuesStart 中的有效数据做了个提取）
    var _valuesStartRepeat = {};
    // 过度时间 默认 1000ms
var _duration = 1000;
    // 重复次数 默认0
var _repeat = 0;
    // yoyo 效果 将过度效果反转 在有重复时生效
var _yoyo = false;
// 是否正在过度
    var _isPlaying = false;

    var _reversed = false;
    // 延迟时间 默认0
var _delayTime = 0;
// 开始时间
    var _startTime = null;
// 过度算法
    var _easingFunction = TWEEN.Easing.Linear.None;
    // 插值算法
    var _interpolationFunction = TWEEN.Interpolation.Linear;
// Tweens 链
    var _chainedTweens = [];
    // 开始事件回调
    var _onStartCallback = null;
// 开始事件是否已经触发
    var _onStartCallbackFired = false;
// 更新事件回调
    var _onUpdateCallback = null;
// 完成事件回调
    var _onCompleteCallback = null;
// 结束事件回调
    var _onStopCallback = null;

// Set all starting values present on the target object
// 将传入的数据 float化 并 写入 _valuesStart
    for ( var field in object ) {

_valuesStart[ field ] = parseFloat(object[field], 10);

}
    
    // 设置_valuesEnd 和 duration 
this.to = function ( properties, duration ) {

if ( duration !== undefined ) {

_duration = duration;

}

_valuesEnd = properties;

return this;

};
    // 过度开始
this.start = function ( time ) {
        // 将这个Tween对象压入 TWEEN._tweens 列表
TWEEN.add( this );
        // 开始过度
_isPlaying = true;
        // onStart事件是否已触发标记未 否
_onStartCallbackFired = false;
        
        // 若未传入 time 则生成一个毫秒数 表示当前时间
        /*
        **和JavaScript中其他可用的时间类函数(比如Date.now)不同的是,window.performance.now()返回的时间戳没有被限制在一毫秒的精确度内,而它使用了一个浮点数来达到微秒级别的精确度.

        **另外一个不同点是,window.performance.now()是以一个恒定的速率慢慢增加的,它不会受到系统时间的影响(可能被其他软件调整)。另外，performance.timing.navigationStart + performance.now() 约等于 Date.now()
        */
_startTime = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() );
        // 开始过度时间 = 当前时间 + 延迟时间
_startTime += _delayTime;

for ( var property in _valuesEnd ) {

// check if an Array was provided as property value
             // 检查对象属性的值是否有数组
if ( _valuesEnd[ property ] instanceof Array ) {

if ( _valuesEnd[ property ].length === 0 ) {

continue;

}
                 // 如果是数组的话 对数组做了个拷贝 存储在 _valuesEnd 中
                 // ？ 为什么存储在 _valuesEnd 中？
// create a local copy of the Array with the start value at the front
_valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] );

}
            
            // 将传入的 对象属性 写入 _valuesStart
_valuesStart[ property ] = _object[ property ];
            // 将 _valuesStart 中的值 float 化
if( ( _valuesStart[ property ] instanceof Array ) === false ) {
_valuesStart[ property ] *= 1.0; // Ensures we're using numbers, not strings
}
            // 将有效的属性写入 _valuesStartRepeat NaN 置 0
_valuesStartRepeat[ property ] = _valuesStart[ property ] || 0;

}

return this;

};
    // 过度结束
this.stop = function () {
        
if ( !_isPlaying ) {
return this;
}
        // 将 该Tween对象 从 TWEEN._tweens中移除
TWEEN.remove( this );
        // 将 正在过度变量 标记未 否
_isPlaying = false;
        // 触发 onStop 回调
if ( _onStopCallback !== null ) {

_onStopCallback.call( _object );

}
        // 结束整个 Tweens 链
this.stopChainedTweens();
return this;

};
    // 结束整个 Tweens 链
this.stopChainedTweens = function () {

for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {

_chainedTweens[ i ].stop();

}

};
    
this.delay = function ( amount ) {

_delayTime = amount;
return this;

};

this.repeat = function ( times ) {

_repeat = times;
return this;

};

this.yoyo = function( yoyo ) {

_yoyo = yoyo;
return this;

};


this.easing = function ( easing ) {

_easingFunction = easing;
return this;

};

this.interpolation = function ( interpolation ) {

_interpolationFunction = interpolation;
return this;

};

this.chain = function () {

_chainedTweens = arguments;
return this;

};

this.onStart = function ( callback ) {

_onStartCallback = callback;
return this;

};

this.onUpdate = function ( callback ) {

_onUpdateCallback = callback;
return this;

};

this.onComplete = function ( callback ) {

_onCompleteCallback = callback;
return this;

};

this.onStop = function ( callback ) {

_onStopCallback = callback;
return this;

};
    // 更新这个Tween对象
    // 耗能大户
    // 如果包含1W个Tween对象 在一个 60 FPS的 animation 中 update 则1S中需要 执行60W次
this.update = function ( time ) {

var property;
        
        // 小于开始时间直接 return 
        // 在这里 return了 耗能就小了
if ( time < _startTime ) {

return true;

}
        // 检查 onStart 回调是否已经触发 未触发则触发同时标记为已触发
if ( _onStartCallbackFired === false ) {

if ( _onStartCallback !== null ) {

_onStartCallback.call( _object );

}

_onStartCallbackFired = true;

}
        // 过度进度
var elapsed = ( time - _startTime ) / _duration;
elapsed = elapsed > 1 ? 1 : elapsed;
        // 将线性的 过度进度 根据 配置 调整
var value = _easingFunction( elapsed );
        
for ( property in _valuesEnd ) {

var start = _valuesStart[ property ] || 0;
var end = _valuesEnd[ property ];

if ( end instanceof Array ) {

_object[ property ] = _interpolationFunction( end, value );

} else {

// Parses relative end values with start as base (e.g.: +10, -3)
if ( typeof(end) ===    "string" ) {
end = start + parseFloat(end, 10);
}
                
// protect against non numeric properties.
if ( typeof(end) === "number" ) {
_object[ property ] = start + ( end - start ) * value;
}

}

}
        // 触发 onUpdate 回调
if ( _onUpdateCallback !== null ) {

_onUpdateCallback.call( _object, value );

}
        // 如果该次过度结束 不结束 return 1 结束分情况 彻底结束 return 0 否则return 1
if ( elapsed == 1 ) {
            // 重复次数不为 0 的情况
if ( _repeat > 0 ) {
                // 如果重复次数不是无限大·· 则重复次数-1次
if( isFinite( _repeat ) ) {
_repeat--;
}

// reassign starting values, restart by making startTime = now
for( property in _valuesStartRepeat ) {

if ( typeof( _valuesEnd[ property ] ) === "string" ) {
_valuesStartRepeat[ property ] = _valuesStartRepeat[ property ] + parseFloat(_valuesEnd[ property ], 10);
}
                    // 如果有yoyo效果 则 交换 valueEnd和valueStartRepeat 再进行一次过度 
if (_yoyo) {
var tmp = _valuesStartRepeat[ property ];
_valuesStartRepeat[ property ] = _valuesEnd[ property ];
_valuesEnd[ property ] = tmp;
}

_valuesStart[ property ] = _valuesStartRepeat[ property ];

}
                // 颠倒反转
if (_yoyo) {
_reversed = !_reversed;
}

_startTime = time + _delayTime;

return true;

} else {
                // 触发 完成 回调
if ( _onCompleteCallback !== null ) {

_onCompleteCallback.call( _object );

}
                // 将Tween链上的下一个Tween开始
for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {

_chainedTweens[ i ].start( time );

}

return false;

}

}

return true;

};

};

// 纯函数 将 [0-1] 的值 以不同的变化率 映射到 [0-1]
TWEEN.Easing = {
    // 一次线性变化
Linear: {
        
None: function ( k ) {

return k;

}

},
    // 二次
Quadratic: {
        
In: function ( k ) {

return k * k;

},

Out: function ( k ) {

return k * ( 2 - k );

},

InOut: function ( k ) {

if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
return - 0.5 * ( --k * ( k - 2 ) - 1 );

}

},
    // 三次方
Cubic: {

In: function ( k ) {

return k * k * k;

},

Out: function ( k ) {

return --k * k * k + 1;

},

InOut: function ( k ) {

if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k + 2 );

}

},
    // 四次方
Quartic: {

In: function ( k ) {

return k * k * k * k;

},

Out: function ( k ) {

return 1 - ( --k * k * k * k );

},

InOut: function ( k ) {

if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );

}

},
    // 五次方
    // ？ 用得了这么多么？
Quintic: {

In: function ( k ) {

return k * k * k * k * k;

},

Out: function ( k ) {

return --k * k * k * k * k + 1;

},

InOut: function ( k ) {

if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );

}

},
    // 正弦 
Sinusoidal: {

In: function ( k ) {

return 1 - Math.cos( k * Math.PI / 2 );

},

Out: function ( k ) {

return Math.sin( k * Math.PI / 2 );

},

InOut: function ( k ) {

return 0.5 * ( 1 - Math.cos( Math.PI * k ) );

}

},
    // 指数
Exponential: {

In: function ( k ) {

return k === 0 ? 0 : Math.pow( 1024, k - 1 );

},

Out: function ( k ) {

return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k );

},

InOut: function ( k ) {

if ( k === 0 ) return 0;
if ( k === 1 ) return 1;
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 );
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );

}

},
    // 圆形 
    // 差不多是个指数图像  不知道为什么命名为Circular
Circular: {

In: function ( k ) {

return 1 - Math.sqrt( 1 - k * k );

},

Out: function ( k ) {

return Math.sqrt( 1 - ( --k * k ) );

},

InOut: function ( k ) {

if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);

}

},
    // 弹性
Elastic: {

In: function ( k ) {

var s, a = 0.1, p = 0.4;
if ( k === 0 ) return 0;
if ( k === 1 ) return 1;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );

},

Out: function ( k ) {

var s, a = 0.1, p = 0.4;
if ( k === 0 ) return 0;
if ( k === 1 ) return 1;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );

},

InOut: function ( k ) {

var s, a = 0.1, p = 0.4;
if ( k === 0 ) return 0;
if ( k === 1 ) return 1;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;

}

},
    // 这个会先往回走一段 然后以一个更快的速度到达 1
Back: {

In: function ( k ) {

var s = 1.70158;
return k * k * ( ( s + 1 ) * k - s );

},

Out: function ( k ) {

var s = 1.70158;
return --k * k * ( ( s + 1 ) * k + s ) + 1;

},

InOut: function ( k ) {

var s = 1.70158 * 1.525;
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );

}

},
    // 弹跳
Bounce: {

In: function ( k ) {

return 1 - TWEEN.Easing.Bounce.Out( 1 - k );

},

Out: function ( k ) {

if ( k < ( 1 / 2.75 ) ) {

return 7.5625 * k * k;

} else if ( k < ( 2 / 2.75 ) ) {

return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;

} else if ( k < ( 2.5 / 2.75 ) ) {

return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;

} else {

return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;

}

},

InOut: function ( k ) {

if ( k < 0.5 ) return TWEEN.Easing.Bounce.In( k * 2 ) * 0.5;
return TWEEN.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5;

}

}

};

// 插值算法 针对数组做的插值操作
TWEEN.Interpolation = {

Linear: function ( v, k ) {

var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.Linear;

if ( k < 0 ) return fn( v[ 0 ], v[ 1 ], f );
if ( k > 1 ) return fn( v[ m ], v[ m - 1 ], m - f );

return fn( v[ i ], v[ i + 1 > m ? m : i + 1 ], f - i );

},

Bezier: function ( v, k ) {

var b = 0, n = v.length - 1, pw = Math.pow, bn = TWEEN.Interpolation.Utils.Bernstein, i;

for ( i = 0; i <= n; i++ ) {
b += pw( 1 - k, n - i ) * pw( k, i ) * v[ i ] * bn( n, i );
}

return b;

},

CatmullRom: function ( v, k ) {

var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.CatmullRom;

if ( v[ 0 ] === v[ m ] ) {

if ( k < 0 ) i = Math.floor( f = m * ( 1 + k ) );

return fn( v[ ( i - 1 + m ) % m ], v[ i ], v[ ( i + 1 ) % m ], v[ ( i + 2 ) % m ], f - i );

} else {

if ( k < 0 ) return v[ 0 ] - ( fn( v[ 0 ], v[ 0 ], v[ 1 ], v[ 1 ], -f ) - v[ 0 ] );
if ( k > 1 ) return v[ m ] - ( fn( v[ m ], v[ m ], v[ m - 1 ], v[ m - 1 ], f - m ) - v[ m ] );

return fn( v[ i ? i - 1 : 0 ], v[ i ], v[ m < i + 1 ? m : i + 1 ], v[ m < i + 2 ? m : i + 2 ], f - i );

}

},

Utils: {

Linear: function ( p0, p1, t ) {

return ( p1 - p0 ) * t + p0;

},

Bernstein: function ( n , i ) {

var fc = TWEEN.Interpolation.Utils.Factorial;
return fc( n ) / fc( i ) / fc( n - i );

},

Factorial: ( function () {

var a = [ 1 ];

return function ( n ) {

var s = 1, i;
if ( a[ n ] ) return a[ n ];
for ( i = n; i > 1; i-- ) s *= i;
return a[ n ] = s;

};

} )(),

CatmullRom: function ( p0, p1, p2, p3, t ) {

var v0 = ( p2 - p0 ) * 0.5, v1 = ( p3 - p1 ) * 0.5, t2 = t * t, t3 = t * t2;
return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;

}

}

};