关于JavaScript的动画原理
运动也可以叫做动画
1、运动原理
通过连续不断的改变物体的位置，而发生移动变化。
使用setInterval实现。
匀速运动：速度值一直保持不变。
多物体同时运动：将定时器绑设置为对象的一个属性。
注：物体每次运动都应该把之前的定时器清除掉。
//box为绝对定位
var speedX = 2
box.timer = setInterval(function(){
box.style.left = box.offsetLeft + speedX +'px';
},80)
2、边界处理
遇到边界是应该停止掉还是反弹，方向相反。
改变物体运动方向：将物体的速度值取反。
//边界属性 浏览器视口宽高
//返回当前视口的高度（即浏览器窗口的高度）
console.log(document.documentElement.clientHeight)
console.log(document.documentElement.clientWidth)
// 网页总高度 body默认有margin，记得重置
console.log(document.body.clientHeight)
console.log(document.body.clientWidth)
var speedX = 2
box.timer = setInterval(function(){
box.style.left = box.offsetLeft + speedX +'px';
//左右边界
if(box.offsetLeft <=0 || box.offsetLeft >= cWidth - box.offsetWidth){
speedX = -speedX;
}
},80
3、加速减速
加速：速度越来越快。
减速：速度越来越慢。
box.timer = setInterval(function() {
speedX = speedX + 2;
div.style.left = div.offsetLeft + speedX + 'px';
}, 50);
4、抛物线
水平方向有一速度，垂直方向有一速度，并做自由落体。
var speedY = 0;
var speedX = 10;
// x 方向 匀速
// y 方向 匀加速
box.timer = setInterval(function() {
speedY += 9.8
box.style.left = box.offsetLeft + speedX + 'px';
box.style.top = box.offsetTop + speedY + 'px'
}, 80)
5、透明度的变换
box逐渐消失
//使用css将box的opacity 设置为1
var op = 1;
box.timer = setInterval(function() {
op = op - 0.01;
div.style.opacity = op
//或者
//div.style.opacity = getComputedStyle(div).opacity - 0.01;
}, 80);
6、缓冲运动
速度一开始很大，然后慢慢变小，比较类似自然界中的缓冲运动
//一开始box 在 （0，0）位置，我们将box运动到（300,0）位置
var target = 300; //目标位置
box.timer = setInterval(function() {
//target - div.offsetLeft
是元素距离目标的路程，随着越来越靠近目标，这个值就越来越小，如果把这个值当做速度，速度一开始很大，然后慢慢变小，比较类似自然界中的缓冲运动。如果把这个值直接当速度，一下子就到，所以除以8以后当做速度
var speed = (target - div.offsetLeft) / 8;
//所以要对速度向上取整得到速度1，当speed小于0.375的时候，div就不会移动了
speed = Math.ceil(speed);
box.style.left = div.offsetLeft + speed + 'px';
if(box.offsetLeft == target) {
//到达目标清除定时器
clearInterval(box.timer);
}
}, 30);
考虑到运动的时候可能往前，也可以能往后，增加判断
//一开始box 在 （0，0）位置，我们将box运动到（300,0）位置
var target = 300; //目标位置
div.timer = setInterval(function() {
var speed = (target - div.offsetLeft) / 8;
//当speed小于0.375的时候，div就不会移动了
//所以要对速度向上取整或者向下取整
if(speed > 0) {
//speed大于0 说明是往前运动
//当speed小于0.375的时候，div就不会移动了
//所以要对速度向上取整或者向下取整
speed = Math.ceil(speed);
} else {
//speed大于0 说明是往后运动
speed = Math.floor(speed);
}
div.style.left = div.offsetLeft + speed + 'px';
if(div.offsetLeft == target) {
clearInterval(div.timer);
}
}, 30);
上面代码封装为函数
function animate(div,targetX) {
var target = targetX;
div.timer = setInterval(function () {
var speed = (target - div.offsetTop)/8;
speed = (speed>0? Math.ceil(speed): Math.floor(speed));
div.style.top = div.offsetTop + speed +'px';
if(div.offsetTop == target){
clearInterval(div.timer);
}
},30);
}
7、多属性缓冲运动函数封装
上面的封装只能固定的在x方向做动画
如果想让一个div 从一个点运动到另一个点，怎么办？
比如从（0，0）到（100，200）
这个时候我们把第二个参数改为一个这样的对象 {left:100;top:200}
function animate(div, obj) {
//{left:100;top:200}
//{left:100}
clearInterval(div.timer);
div.timer = setInterval(function() {
var flag = true; //假设已经到了目的地
for(var key in obj) {
console.log(key) //left top
console.log(obj[key]) //300
var target = obj[key]; //目标值
// getComputedStyle['left'] 元素left 属性 当前值
var speed = (target - parseInt(getComputedStyle(div)[key])) / 8;
speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
div.style[key] = parseInt(getComputedStyle(div)[key]) + speed + 'px';
if(parseInt(getComputedStyle(div)[key]) != target) {
flag = false;
}
}
//必须等到所有的 属性都到达目的地 才能结束定时器
if(flag == true) {
clearInterval(div.timer);
}
}, 30);
}
上面咱们就封装了一个运动函数，也可以叫运动框架，说白了，就是封装一次以后，我们再做一些动画就非常方便！前人栽树后人乘凉，便是框架的好处！
如果想让框架支持透明度动画怎么办呢？无非是增加更多的判断
运动框架最终封装见animateBak.j
编辑：千锋HTML5
