多元素运动框架-链式运动的封装

1.0运动原理：

逆战班学生整理
让某件物品沿着某种方向随着时间的变化改变位置
setInterval(function(){
obox.style.left = obox.offsetLeft+10+“px”;
},30)
添加计时器让页面中的obox元素的left值，每30毫秒，在自身left的基础上增加10像素

为什么是30毫秒呢？
因为电影播放每秒24帧，人眼识别不出卡顿，但对于电脑来说，处理速度相对较快，
需要每秒30帧以上才会显得流畅

2.0边界处理

当元素的offsetLeft超出一定距离或到达一个边界值后，停止计时器
var timer;
timer = setInterval(function(){ 添加计时器
if(obox.offsetLeft>=200){ 判断页面obox元素的left值大于200是停止计时器
clearInterval(timer);
}else{
obox.style.left = obox.offsetLeft+10+“px”; left值未达到200时继续增加left值
}
},30)

重力回弹

加速效果：增加重力值，随着定时器的执行，重力增大

回弹效果：当抵达目标位置时，将速度改为负值

回弹减速：将速度改变为负值的同时，除以2减半
var obox = document.getElementById(“box”); 获取ID名为box的元素
var oChild = obox.children[0]; 获取obox的子元素
var speed = 2; //速度 给一个初始速度
var index = 0; //计时器计数
var timer = null;
var g = 1; //重力 给一个重力加速度
var left = 10; //抛物线 给定left的初始值
var maxTop = obox.offsetHeight-oChild.offsetHeight; //获取运动高度的最大值
var maxLeft = obox.offsetWidth-oChild.offsetWidth; //获取运动长度的最大值，抛物线
obox.onmouseover = function(){ 给定一个鼠标移入事件
clearInterval(timer); 让每次执行前都清除一次计时器
timer = setInterval(function(){ 添加计时器
index++; 计时器计数自增
if(index%5 == 0){ //每隔5次，增加重力
speed = speed + g;
}
oChild.style.top = oChild.offsetTop + speed + “px”; //设置当前元素所在位置的TOP值
oChild.style.left = oChild.offsetLeft + left + “px”; //设置当前元素所在位置的LEFT值，抛物线
if(maxTop - oChild.offsetTop <= speed){ //当元素距终点的距离不足一个速度值时，让元素回弹
speed = -Math.round(speed*0.7); //回弹的速度减小
oChild.style.top = maxTop + “px”; //每次回弹未到重点，让元素强制到终点
if(Math.abs(speed) <= 1){ //速度小于1，停止运动，清除计时器
clearInterval(timer);
}
}
if(maxLeft-oChild.offsetLeft <= left){ 当元素LEFT值超过当前容器的最大可移动宽度是改变方向
left = -left;
}
if(oChild.offsetLeft <= 0){ 当元素LEFT值超过当前容器的最大可移动宽度是改变方向
left = -left;
}
},30)
}

缓冲运动

根据距离计算速度；距离和速度成正比；
速度为：(目标位置-当前位置)/10

注意：0.5px的时候会发生什么，需要向上取整，那么反方向运动呢？-0.5时向下取整

speed ＝ speed>0 ? Math.ceil(speed) : Math.floor(speed);             速度的向上取整和向下取整

     var timer = null;                                        
	function move(target){                       
		clearInterval(timer);            // 1. 每次运动前都关闭定时器;
		timer = setInterval(function(){            开启计时器   
			var speed = (target - oBox.offsetLeft) / 10;    //2.计算速度;速度为：(目标位置-当前位置)/10
			// if(speed > 0){
			// 	speed = Math.ceil(speed);            速度取整的判断方法1
			// }else{
			// 	speed = Math.floor(speed);
			// }
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);      // 速度取整判断方法2
			//console.log(speed,oBox.offsetLeft);	
			// 3. 终止运动;
			if(target == oBox.offsetLeft){            当运动距离等于总距离时停止运动关闭计时器
				clearInterval(timer);
			}else{
				oBox.style.left = oBox.offsetLeft + speed + "px";
			}                                                        未到距离继续运动
		}, 30);
	}

多元素运动框架函数封装

function move(ele,json,callback){
//0.先清除计时器，再开一个计时器，计时器要绑定在对应的元素对象身上
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var onOff = true; 设置一个开关
for(var attr in json){ 用for in遍历josn
// console.log(attr)
// console.log(json[attr]);
// 1.计算当前值
if(attr == “opacity”){ 判断元素运动方式是否为透明度，
var iNow = Math.round(getStyle(ele,attr)100); 获取元素的非行内样式，当样式为透明度时值为0-1需要100计算
}else{
var iNow = parseInt(getStyle(ele,attr)); 获取元素的非行内样式，下面有封装函数
}
// 2.算出步长
var speed = (json[attr] - iNow)/10;
if(speed<0){
speed = Math.floor(speed);
}else{
speed = Math.ceil(speed);
}
//备注：双分支的另一种写法：三目运算
// speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
//3.判断是否所有属性都到目标点
if(json[attr] != iNow){
onOff = false; 如果元素到目标点关闭开关
}
//4.给元素设置属性，产生运动
if(attr == “opacity”){
ele.style[attr] = (iNow + speed)/100; 透明度的运动方式
ele.style.filter = “alpha(opacity=”+ iNow + speed +")";
}else{
ele.style[attr] = iNow + speed + “px”; 非透明度的运动方式
}
}
//5.当json被遍历结束后，判断所有属性是否到终点，如果到了，就停止计时器，反之，不执行
if(onOff){
clearInterval(ele.timer);
//6.动画结束之后的操作
if(callback){
callback();
}
}
},30)
}

// 获取非行内样式 返回的是字符带PX
// getStyle(obox,“left”)对象 样式
function getStyle(obj, attr) { obj是对象，attr是值
if (obj.currentStyle) {
return obj.currentStyle[attr]; 针对IE浏览器获取非行间样式
} else {
return getComputedStyle(obj, false)[attr]; 针对非IE浏览器获取非行间样式
}
}
调用方法： （JOSN数组内可以写多种数据）
document.onmouseover = function(){ 当鼠标移入时调用函数
move(obox1,{“width”:120,“height”:200},function(){ obox1为运动的对象 ，数组内为要运动的方式
console.log(“第一个动画结束”);
move(obox1,{“left”:100,“top”:200},function(){ 可以套用多种运动一次执行
console.log(“第二个动画结束”);
move(obox1,{“opacity”:20,“width”:300})
})
});
move(obox2,{“height”:400,“top”:400})
}
document.onmouseout = function(){ 当鼠标移出时调用函数
move(obox1,{“left”:0,“top”:50},function(){
move(obox1,{“width”:100,“height”:100})
});
move(obox2,{“height”:100,“top”:300})
}