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

学习要点：

1.问题所在
2.设置代码

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

一．问题所在

在很多时候，我们为了实现一些效果，比如渐变、滑动、运动等等效果我们需要让网页
上的元素动起来，而如果使用之前的效果，显得有点生硬。

二．设置代码

//最简单的运动
$(function () {
var box = document.getElementById('box');
setInterval(function () {
box.style.left= box.offsetLeft + 1 + 'px';
}, 50);
});

PS：最简单的动画，原理也很简单，通过 setInterval 每 50 毫秒不停的执行让 left 坐标
不停的变化，最终呈现出的效果就是元素运动了。

//封装最简单的运动
Base.prototype.animate = function (attr, step, target, t) {
for (var i = 0; i < this.elements.length; i ++) {
var element = this.elements[i];
var timer = setInterval(function () {
element.style[attr] = getStyle(element, attr) + step + 'px';
if (getStyle(element, attr) == target) clearInterval(timer);
}, t);
}
return this;
};

PS：通过设置目标点，可以让运动的元素到到达。然后删除它即可停止运动。
//获取计算后的 style，需要转换为数值

function getStyle(element, attr) {
var value;
if (typeof window.getComputedStyle != 'undefined') {//W3C
value = parseInt(window.getComputedStyle(element, null)[attr]);
} else if (typeof element.currentStyle != 'undeinfed') {//IE
value = parseInt(element.currentStyle[attr]);
}
return value;
}
//上下左右均可移动
$(function () {
$('#box').animate('left', -5, 0, 50);
});

PS：调用的时候主要的问题是，参数只有 left 和 top，没有 right 和 bottom。如果向左移
动，step 是负值，并且 target 应该小于本身的 left，依次类推。

感谢收看本次教程！