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);}

多元素运动框架函数封装

// 获取非行内样式返回的是字符带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})
}

多元素运动框架-链式运动的封装相关推荐

javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
按键改变元素背景颜色链式编程的原理评分案例 each方法的使用
按键改变元素背景颜色 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
链式运动JavaScript实现
html代码 <div></div> <div></div> <div></div> <div>你这一辈子有没有为别 ...
css3运动框架,CSS3 原子运动
CSS 语言: CSSSCSS 确定 /** * Declare keyframes. */ /** * Start Styling! */ @-webkit-keyframes rotateX { ...
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下: <!DOCTYPE HTML> < ...
好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

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