JS常见的运动主要有三种,1.匀速运动,2.减速运动(也叫缓冲运动),3.碰撞运动.
1.匀速运动,设置默认的speed即可,没有太多难点
2.减速运动,即速度越来越慢,如下图所示
实现原理:动态获取其speed即可,
speed = (目标 - 当前) / 10
//或者其他数字,这样就能让其速度原来越小
//源码:
function move(obj , attr , target){
clearInterval(obj.time_id);
obj.time_id = setInterval(function(){
var iCurr = 0;
if(attr == 'opacity'){
iCurr = parseInt(parseFloat(getStyle(obj , attr))*100);
}else{
iCurr = parseInt(getStyle(obj , attr));
}
console.log(iCurr);
var speed = (target - iCurr)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == iCurr){
clearInterval(obj.time_id);
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(iCurr + speed)+')';
obj.style.opacity = (iCurr + speed)/100;
}else{
obj.style[attr] = parseInt(getStyle(obj , attr)) + speed + 'px';
}
}, 40);
}
3.碰撞运动,即让目标来回运动,最终再慢慢落到目标点,如下图所示
实现原理:1.与缓冲类似,speed也需要动态来获取,2.speed是需要不断的在运动的基础上递减的
//源码:
function move(obj , target){
clearInterval(obj.time_id);
obj.time_id = setInterval(function(){
//speed动态获取,并且每次都是在+= 这里注意,与缓冲不同,这样才能在超过目标的时候形成来回摆动的效果
speed += (target - obj.offsetLeft)/5;
if(speed == 0){
return false;
}
console.log(speed , obj.offsetLeft);
//与此同时,速度在不断的递减
speed *= 0.7;
left += speed;
if(Math.abs(speed)<1 && Math.abs(left - target)<1){
clearInterval(obj.time_id);
obj.style.left = target + 'px';
}else{
obj.style.left = left + 'px';
}
} , 30);
}