js动画简单封装-requestAnimationFrame
2017-01-18 23:39

    js动画相比css3动画,animation动画的有点就是可以兼容IE8甚至IE7的浏览器,并且操作的可控性强。

    在使用js动画时,我们可以采用setTimeout递归调用,直接使用setInterval,使用jquery提供的animate。其中使用animate实现动画最为方便。

$(".anim").animate({left:100px,width:50px,height:50px},500,function(){
    console.log("动画执行完成了");
});

使用jQuery的animate我们只需简单的一句话就可以实现想要的动画效果了。

但是如果我们的页面没有jquery库的时候就需要自己用setTimeout来实现需要的动画了。

这时我们可以写一个自己的动画方法来封装一下动画的实现。

var requestA=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimaitonFrame||function(callback){return window.setTimeout(callback,1000/60);};

首先定义一个requestA,高端浏览器使用requestAnimationFrame同步帧,低端IE仍然使用setTimeout。

然后我们实现一个方法,类似下面

function moAnimate(elem,tm,callback){
    var per=0.5//代表动画运行的进度。
    callback.call(elem,per);
}

如果能实现一个这种形式的动画方法,那么我们再给一个对象进行动画的时候就可以方便的调用,动画的具体实现在回调函数中实现。

function moAnimate(elm,tm,funarg){
		if(typeof elm === 'string'){
			elm=document.getElementById(elm);
		}
		tm=tm||300;
		var startTime=0;
		if(window.performance&&window.performance.now){
			startTime=window.performance.now();
		}else{
			startTime=Date.now();
		}
		funarg=funarg||function(){};
		requestA(function(){//使用requestA同步帧调用动画实现方法。
			moRequest(elm,startTime,tm,funarg);
		});
	}
	function moRequest(elm,startTime,tm,funarg){
		var currTime=0,name="";
		if(window.performance&&window.performance.now){
			currTime=window.performance.now();
		}else{
			currTime=Date.now();
		}
		if(!startTime){
			startTime=currTime;
			id=requestA(function(){moRequest(elm,startTime,tm,funarg);});
			return ;
		}
		var percent=(currTime-startTime)/tm;//通过当前时间与开始时间的差值与所需动画时间对比
		percent=percent>1?1:percent;//得到运行的进度值。
		if(percent>=1){
			funarg.call(elm,percent);//将进度值传递给回调函数
		}else{
			funarg.call(elm,percent);
			id=requestA(function(){moRequest(elm,startTime,tm,funarg);});//递归调用moRequest方法。
		}
		
	}

通过上面两个方法,我们就实现了简单的动画封装,这两个方法只是提供了在固定时间值中执行动画的进度值。具体的动画操作,在回调函数中根据情景进行实现。

使用例子如下:

//将一个#odiv从opacity为0渐显后由移动200像素。
#odiv{opacity:0;}
moAnimate("odiv",700,function(per){
    var opc=per;
    this.style.opacity=opc;
    if(per==1){//per==1标志这个动画执行完成后的调用。
        moAnimate(this,600,function(per){
            var transx=200*per;
            this.style.webkitTransform="translate("+transx+"px,0px)";
            if(per==1){
                console.log("动画都执行完成了!");
            }
        });
    }
});

如果我们想在一个dom对象的动画中同步操作另一个dom元素进行相应的动画也是很方便的。

#odiv{opacity:0}
#mdiv{opacity:1}
var mdiv=document.getElementById("mdiv");
moAnimate("odiv",800,function(per){
    var opc=per;
    var nopc=1-per;
    this.style.opacity=opc;
    mdiv.style.opacity=nopc;
});

这样我们就实现了两个dom元素同步一个显示一个隐藏了。

是不是感觉使用起来很方便,而且动画过程全在自己的控制中了呢。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3958)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1