原声js做动画判断是否到达目标值导致的突兀问题

如题,什么意思呢?

$('#box').animate({
          start:200, attr:'left', step:13, alter:400 //增量 })

  这时写好的动画函数animate用法

上面起始值是200,步长13,目标值是200+400=600,那么每次我都运动13,那么他只运动到590然后再运动到603然后判断并重新赋值到600,突兀吧?先看看我是怎么判断到达终点的

if((step>0&&target<=parseInt(getStyle(element,attr)))||(step<0&&target>=parseInt(getStyle(element,attr)))){
				element.style[attr]=target+'px';
				clearInterval(timer);
			}else{
				element.style[attr]=parseInt(getStyle(element,attr))+step+'px';
				
			}

  这个step只需要传递正值,函数会自动赋值正还是负,如果step>0这是正方向移动并且目标值<=现在的值那么停止动画并赋新的值,所以导致突兀

再看看改进的

//改了以后:又简洁又好用啊
			if(Math.abs(target-parseInt(getStyle(element,attr)))<=Math.abs(step)){
				element.style[attr]=target+'px';
				clearInterval(timer);
			}else{
				element.style[attr]=parseInt(getStyle(element,attr))+step+'px';
				
			}

  只需要判断Math.abs(目标值减现在的值)是否小于等于Math.abs(step)如果成立则停止 这样当我运动到590时,会进入这个判断然后下一个动作就是600,就不那么生硬啦!

posted @ 2016-08-01 18:14  Y_WEB  阅读(244)  评论(0编辑  收藏  举报