學習要點：
1.問題所在
2.設置代碼
本節(jié)課壶愤，我們要講一下 JavaScript 在動畫中的實現(xiàn)念链，讓大家了解動畫是怎樣形成的。
一．問題所在
前兩節(jié)課，我們講解了最簡單的動畫蓉坎，也就是勻速動畫，這節(jié)課胡嘿，我們繼續(xù)把勻速動畫
改裝為緩沖動畫。緩沖動畫有逐漸減速和逐漸加速钳踊，一般來說絕大部分用的是逐漸減速衷敌。
二．設置代碼
1.更好的解決多出幾個像素或少出幾個像素的方法。
if (step > 0 && Math.abs((getStyle(element, attr) - target)) < step) //正值使用
if (step < 0 && (getStyle(element, attr) - target) < Math.abs(step)) //負值使用
2.使用 x 和 y 軸表示橫縱方向拓瞪，更加清晰缴罗。
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : 'left' //x,y 軸
3.緩沖運動
var speed = obj['speed'] != undefined ? obj['speed'] : 6; //緩沖值
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; //是否緩沖
if (type == 'buffer') {
var temp = (target - getStyle(element, attr)) / speed;
step = step > 0 ? Math.ceil(temp) : Math.floor(temp);
}
PS：正值的使用 Math.ceil 取整，小數(shù)部分進一位祭埂。負值的時候使用 Math.floor面氓，小數(shù)部
分進一位。這樣就不會導致結束運動的時候不流暢突兀的感覺蛆橡。
4.長高變換動畫舌界，只要加入 width 和 height 值即可。
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 'left';
5.提供 alter 增量和 target 目標量兩種方案
var alter = obj['alter'];
var target = obj['target'];
if (alter != undefined && target == undefined) { //增量有值泰演，目標量無值
target = alter + start;
} else if (alter == undefined && target == undefined) { //增量和目標量都無值
throw new Error('alter 增量或者 target 目標量必須傳遞一個呻拌！');
}
