https://www.cnblogs.com/createGod/p/6941340.html
Tween.js 動畫效果
一、apply,和call的用法。
先來一個與本次博文無關的東西，就是apply和call的用法。其實apply和call的用法都一樣，只是他們的傳參不一樣。apply是數組，而call是單獨的傳，類似枚舉。
1.列子一把arguments轉化為標准數組，可以使用push等方法。
function test(){
//arguments.push(5); //arguments.push is not a function
console.log(arguments)
var arg = Array.prototype.slice.apply(arguments,[]);
// var arg = Array.prototype.slice.call(arguments,'');
console.log(arg); //[1,2,3,4]
arg.push(5); // [1,2,3,4,5]
}
test(1,2,3,4);
2.如何把arguments中的參數直接push到一個數組里面？(也借助apply)
function test(){
var arg = [];
Array.prototype.push.apply(arg,arguments);
console.log(arg); // [1,2,3,4] 是不是發現要把一個數組
//插入到另外一個數組的后面不用for循環了，也不用contact了呢？
//其實apply 和call還是有多用法，比如繼承。其實主要是把
//前面對象的方法賦給后面對象而已。比如 object.apply(object1,arg)
//把object的方法賦給 object1。而 arg是參數。
}
test(1,2,3,4);
插曲到此為止。下面主要講解下tween.js
二、關於Tween.js
1.Tween.js是一個包含各種經典動畫算法的JS資源。其實更jQuery.easing.js很多類似之處。主要的方法名也一致。不壓縮代碼也就800來行。
主要包含了：
- Linear：線性勻速運動效果；
- Quadratic：二次方的緩動（t^2）；
- Cubic：三次方的緩動（t^3）；
- Quartic：四次方的緩動（t^4）；
- Quintic：五次方的緩動（t^5）；
- Sinusoidal：正弦曲線的緩動（sin(t)）；
- Exponential：指數曲線的緩動（2^t）；
- Circular：圓形曲線的緩動（sqrt(1-t^2)）；
- Elastic：指數衰減的正弦曲線緩動；
- Back：超過范圍的三次方緩動（(s+1)*t^3 – s*t^2）；
- Bounce：指數衰減的反彈緩動。
每個效果都分三個緩動方式，分別是：
- easeIn：從0開始加速的緩動，也就是先慢后快；
- easeOut：減速到0的緩動，也就是先快后慢；
- easeInOut：前半段從0開始加速，后半段減速到0的緩動。
很多小伙伴easeIn和easeOut哪個先快，哪個先慢一直記不清楚，我這里再給大家傳授一遍我獨門的邪惡記法，想想我們第一次OOXX，是不是進去(easeIn)的時候都是先慢，等進去了就快了；然后出來(easeOut)的時候，開始很快，都要出來了戀戀不舍速度就慢了。跟我們這里的動畫效果是完全匹配的。
所有的這些緩動算法都離不開下面4個參數，t, b, c, d，含義如下
/* * t: current time（當前時間）； * b: beginning value（初始值）； * c: change in value（變化量）； * d: duration（持續時間）。 */
2.console.log(TWEEN);
console.log(TWEEN)
可以看出在TWEEN上掛載了很多方法，以及對象。只要我們一個一個的挖掘，就知道具體有啥用了。
三、先來一個小列子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#target{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="target"></div>
</body>
<script src="tween.js"></script>
<script src="index.js"></script>
</html>
var position;
var target;
var tween, tweenBack;
init();
animate();
function init() {
position = {x: 100, y: 100, rotation: 0};
target = document.getElementById('target');
tween = new TWEEN.Tween(position)
.to({x: 700, y: 200, rotation: 359}, 2000)
.delay(1000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update);
tweenBack = new TWEEN.Tween(position)
.to({x: 100, y: 100, rotation: 0}, 3000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update);
tween.chain(tweenBack);
tweenBack.chain(tween);
tween.start();
}
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
function update() {
target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';
//target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
// target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
}
每個api對應源碼去追尋。就知道用法了。比較源碼也就800多行而已。
四、運動函數
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
五、結束語。
人的一生中有許多的小路，彎路，大路，坑坑窪窪的泥漿路，反正我家鄉就是坑坑窪窪的泥漿路。從接觸第一個網站到現在已經快6年時間。時間過得真快，生命歷程軌跡變化也快。要從坑坑窪窪的泥漿路走出一條光明大道，就必須前進，不能絲毫有退縮之意。在一個領域能走多遠，就看你能堅持多久了。有人說當你在一個領域堅持了10000個小時，你就是這個領域的大師了。10000/24 ？好像是400多天。除去睡覺時間，上班時間，打游戲時間。估計得4-6年才能有10000個小時。另祝大家，天天開心，事事順心。