23.项目 1-博客前端：封装库--动画初探[下]

学习要点：
1.问题所在
2.设置代码

本节课，我们要讲一下 JavaScript 在动画中的实现，让大家了解动画是怎样形成的。

一．问题所在

前两节课，我们讲解了最简单的动画，也就是匀速动画，这节课，我们继续把匀速动画
改装为缓冲动画。缓冲动画有逐渐减速和逐渐加速，一般来说绝大部分用的是逐渐减速。

二．设置代码

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 取整，小数部分进一位。负值的时候使用 Math.floor，小数部
分进一位。这样就不会导致结束运动的时候不流畅突兀的感觉。

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 目标量必须传递一个！');
}

感谢收看本次教程！