先看iframe一下DEMO：
<iframe src="http://vvgr.svfree.net/animate/animate.html" frameborder="0" scrolling="no" width="900" height="720"></iframe>
DEMO:點選直接檢視
Tween中的方法接受4個引數t,b,c,d 。返回值為計算後的當前位置.
t => time(初始記步次數) b => begin(初始位置) c => change(變化量) d => duration(持續次數)
如：
Quad:{ easeIn:function (t, b, c, d) { return c * (t /= d) * t + b; }, easeOut:function (t, b, c, d) { return -c * (t /= d) * (t - 2) + b; }, easeInOut:function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; } }
公式的原理是神馬，我也搞不懂，看起來好高深，我只知道用。。。拿來主義，呵呵。
我們知道了其中的引數的意思，就可以寫一個通用的move函式，用的時候只要傳遞Tween方法即可，我寫的方法如下：
function MoveTo(options) { //引數o,t,b,c,d ***** o為移動物件 t => time(初始記步次數) b => begin(初始位置) c => change(變化量) d => duration(持續次數) var o = options.o, // 移動物件 t = options.t || 0, // 初始步進 lb = options.lb || 0, // 初始left距離 tb = options.tb || 0, // 初始top距離 lc = options.lc || 500, // left變化的距離 tc = options.tc || 0, // top變化的距離 d = options.d || 500, // 變化次數，次數越多速度越慢 tween = options.tween || Tween.Elastic.easeOut; // 移動方式，套用公式 (function () { if (o) { if (lc > 0){ o.style.left = Math.ceil(tween(t, lb, lc, d)) + "px"; } if (tc > 0) { o.style.top = Math.ceil(tween(t, tb, tc, d)) + "px"; } if (t < d) { t++; setTimeout(arguments.callee, 10); } } })() }
動畫與繪製軌跡曲線的程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tween動畫效果</title>
<style type="text/css">
#vvg { text-align: center; font-size: 16px; font-weight: bold; }
#box { width: 520px; height: 50px; border: 1px solid #333; margin: 10px auto; position: relative; }
#sbox { width: 20px; height: 50px; position: absolute; left: 0; background: red; }
#graph{ border: 1px solid #ccc; background: #272424;}
#vvg .radios{width: 520px; margin: 5px auto; font-weight: normal; text-align: left; overflow: hidden;}
#vvg .radios label{ width:103px; float: left;}
#vvg .row1{ background: #cccccc;}
#vvg .row2{ background: #b6b6b6; margin-top: 10px;}
#vvg .btn{padding: 5px 40px;}
</style>
</head>
<body>
<div id="vvg">
<div id="box">
<div id="sbox"> </div>
</div>
<canvas id="graph" width="522px" height="500">你的瀏覽器不支援canvas</canvas>
<div class="radios row1" id="radio_1">
<label><input type="radio" value="Linear" name="tname" checked>Linear</label>
<label><input type="radio" value="Quad" name="tname">Quad </label>
<label><input type="radio" value="Cubic" name="tname">Cubic </label>
<label><input type="radio" value="Quart" name="tname">Quart </label>
<label><input type="radio" value="Quint" name="tname">Quint</label>
<label><input type="radio" value="Sine" name="tname">Sine</label>
<label><input type="radio" value="Expo" name="tname">Expo</label>
<label><input type="radio" value="Circ" name="tname">Circ</label>
<label><input type="radio" value="Elastic" name="tname">Elastic</label>
<label><input type="radio" value="Back" name="tname">Back</label>
<label><input type="radio" value="Bounce" name="tname">Bounce</label>
</div>
<div class="radios row2" id="radio_2">
<label><input type="radio" value="easeIn" name="tname2" checked>easeIn</label>
<label><input type="radio" value="easeOut" name="tname2">easeOut</label>
<label><input type="radio" value="easeInOut" name="tname2">easeInOut</label>
</div>
<div><input type="button" value="運 行" class="btn" id="run"></div>
</div>
<script type="text/javascript">
// 快捷選擇函式
function $(arg, context) {
var tagAll, n, eles = [], i, sub = arg.substring(1);
context = context || document;
if (typeof arg == 'string') {
switch (arg.charAt(0)) {
case '#':
return document.getElementById(sub);
break;
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = $('*', context);
n = tagAll.length;
for (i = 0; i < n; i++) {
if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}
return eles;
break;
default:
return context.getElementsByTagName(arg);
break;
}
}
}
var Tween = {
Linear:function (t, b, c, d) {
return c * t / d + b;
},
Quad:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut:function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut:function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOut:function (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
Quint:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut:function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine:{
easeIn:function (t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut:function (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut:function (t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
Expo:{
easeIn:function (t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut:function (t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut:function (t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ:{
easeIn:function (t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut:function (t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic:{
easeIn:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
Back:{
easeIn:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce:{
easeIn:function (t, b, c, d) {
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut:function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut:function (t, b, c, d) {
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}
//Tween中的方法接受4個引數t,b,c,d 。t為初始時間 b、c、d三個引數（即初始值，變化量，持續時間）。返回值為當前位置
//t => time(初始記步次數) b => begin(初始位置) c => change(變化量) d => duration(持續次數)
/*
先通過上面的座標例項說一下演算法原理：
x軸是時間，y軸是當前值，b是y軸的初始值，x軸的初始值是0，t是當前時間。當t（x軸）逐漸增加到達d時，當前值（y軸）會到達目標值（b+c）。
想詳細理解的話可以找資料看看吧（貌似跟數學關係比較大）。
下面就介紹如何使用這個Tween了，首先b、c、d三個引數（即初始值，變化量，持續時間）在緩動開始前，是需要先確定好的。
舉一個簡單的例子，一個div要向右緩動，left初始值是50，那麼b就是50，要向右移動100，那c就是100，如果知道的是目標值，例如要向右移動到150，那就把目標值150減初始值b就是變化量c了。
至於d的設定就比較靈活，只要符合t是從0向d遞增（或遞減）就可以了。
d跟步長配合使用來設定持續時間，例如d設定為100，如果設定步長是1，那麼從0到100就有100步，即分100次來完成這個過程，步數越多那麼持續時間就越長。
至於t的變化相當於時間的變化，一般是均勻變化的，每次變化都增加一個步長，當t從0遞增（或遞減）到d時，緩動就結束了。
要注意的是t是從0開始的，設定步長時必須確定t確實能到達d，如果上面的步長是3，那麼t就永遠都到不了d了。更好的處理是當t等於或超過d之後，就停止定時器並設定當前值為目標值。
*/
// 獲取radio值
var radio_1 = function(){
var radios = $('input',$('#radio_1'));
for(var i = 0,n=radios.length;i<n;i++){
if(radios[i].checked == true){
return radios[i].value;
}
}
};
var radio_2 = function(){
var radios = $('input',$('#radio_2'));
for(var i = 0,n=radios.length;i<n;i++){
if(radios[i].checked == true){
return radios[i].value;
}
}
};
// 移動動畫
function MoveTo(options) { //引數o,t,b,c,d ***** o為移動物件 t => time(初始記步次數) b => begin(初始位置) c => change(變化量) d => duration(持續次數)
var o = options.o, // 移動物件
t = options.t || 0, // 初始步進
lb = options.lb || 0, // 初始left距離
tb = options.tb || 0, // 初始top距離
lc = options.lc || 500, // left變化的距離
tc = options.tc || 0, // top變化的距離
d = options.d || 500, // 變化次數，次數越多速度越慢
tween = options.tween || Tween.Elastic.easeOut; // 移動方式，套用公式
// 繪圖處=============================不用繪圖可去掉
var canvas = document.getElementById('graph');
var context = canvas.getContext('2d');
context.clearRect(0,0,500,500);
// ================================== end
(function () {
if (o) {
if (lc > 0){
o.style.left = Math.ceil(tween(t, lb, lc, d)) + "px";
// 繪圖區域開始，可以去掉 ==============================
drawPoint({
canvas:canvas,
left:Math.ceil(t*5),
top: Math.ceil(tween(t, lb, lc, d))
})
// 繪圖區域結束 ======================================
}
if (tc > 0) {
o.style.top = Math.ceil(tween(t, tb, tc, d)) + "px";
}
if (t < d) {
t++;
setTimeout(arguments.callee, 10);
}
}
})()
}
// 繪製曲線圖
function drawPoint(options){
var canvas = options.canvas; //畫布
var left = options.left; // time
var top = options.top; // 當前值
var context = canvas.getContext('2d');
// 繪製點
context.fillStyle = '#fff';
context.fillRect(left,top,2,2);
}
$("#run").onclick = function(){
var div = document.getElementById('sbox');
var tween1 = radio_1();
var tween2 = radio_2();
if(!!Tween[tween1][tween2]){
var tween = Tween[tween1][tween2];
}else{
tween = Tween[tween1];
}
var options = {
o:div,
lc:500,
d:100,
tween:tween
}
MoveTo(options);
}
</script>
</body>
</html>
詳細請參考: cloudgamer Tween演算法及緩動效果