DOM高级操作
一、运动的原理
运动的原理:
让某件物品沿着某种方向随着时间的变化改变位置
//让页面中的obox元素的left值,每30毫秒,在自身left的基础上增加10像素
setInterval(function(){
obox.style.left = obox.offsetLeft+10+"px";
},30)
为什么是30毫秒呢?
因为电影播放每秒24帧,人眼就识别不出卡顿了,但是对于电脑来说,处理速度相对较快,需要每秒30帧以上才会显得流畅
二、缓冲运动
在变速运动中,曾经用物理学的知识实现过缓冲运动,缓冲运动实际上就是减速运动的一种特殊形式,指元素做减速运动,速度减到0时,恰好停在目标点位置,学名叫加速度恒定的匀减速运动
假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样;如果是缓动,每次移动距离不一样。那如何才能不一样呢?很简单,按比例移动就可以。
比方说:你和初恋之间距离是64,每秒移动一半,则,你们之间的距离下一秒就是32, 再下一秒就是16,然后8,然后4,然后2,然后1,然后……你们就在一起了。你们在一起的这个过程就是一个典型的先快后慢的缓动运动过程
缓动动画公式:
step = (target - beigin)/10
比如:
100px
第一次步长:
step = (100 - 0)/10 = 10
第二次步长:
step = (100 - 10)/10 = 9
第三次步长:
step = (100 - 19)/10 = 8.1
...
走到最后几步的时候:0.9 0.8 ... 0.1 step>0 Math.ceil(step) 1 正值
走到最后几步的时候:-0.9 -0.8 ... -0.1 step<0 Math.floor(step) -1 负值
/*
获取css样式封装
@param {object} elm 需要获取的元素
@param{string} 你需要改变的属性
*/
function getStyle(elm,attr){
if(window.getComputedStyle){
return getComputedStyle(elm,null)[attr];
}else{
return elm.currentStyle[attr];
}
}
/*
缓动动画封装
注意点:缓动动画的步长需要使用缓动动画公式计算出来,所以不需要传步长值进去
@param {object} elm 表示做动画的元素
@param {number} elm 表示每次运动的步长
@param{number} target 表示你的目标值
@param{string} 你需要改变的属性
@param{function} 回调函数,当函数执行完毕后,后面回调函数执行
*/
function uniformAnimation(elm,des,target,attr,callback){
// 要先清除在开启,不然会造成定时器累加
// 把timer当成一个对象的属性,这样timer属于一个单独的对象,这样就不会影响
clearInterval(elm.timer)
elm.timer = setInterval(function(){
var begin =parseFloat( getStyle(elm,attr));
var num = des;
var result = begin + num;
// 判断当到达预定target位置时,附固定值给结果
if(result >= target && num >0){
result = target
clearInterval(elm.timer);
if(callback){
callback()
}
}else if(result <= target && num <0){
result = target
clearInterval(elm.timer)
if(callback){
callback()
}
}
// 记住一定要使用中括号的形式,参数用点会报错
elm.style[attr] = result +"px";
},30)//30毫秒:主要是动画都是24帧
}
/*
缓动动画封装
注意点:缓动动画的步长需要使用缓动动画公式计算出来,所以不需要传步长值进去
@param {object} elm 表示做动画的元素
@param{number} target 表示你的目标值
@param{string} 你需要改变的属性
@param{function} 回调函数,当函数执行完毕后,后面回调函数执行
*/
function slowAnimation(elm, target, attr, callback) {
// 清除定时器,确保定时器没有累加
clearInterval(elm.timer);
elm.timer = setInterval(function () {
var begin = parseFloat(getStyle(elm, attr));
var result = (target - begin) / 30
result = result > 0 ? Math.ceil(result) : Math.floor(result);
var res = begin + result;
elm.style[attr] = res + "px";
if (target == res) {
clearInterval(elm.timer)
if (callback) {
callback();
}
}
}, 30)
}