码迷,mamicode.com
首页 > 其他好文 > 详细

做动画的一大接口 requestAnimationFrame

时间:2014-07-17 22:30:58      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   使用   

要实现动画效果,可以有以下几种实现:

1.setInterval setTimeout

2.css3 transition

3.requestAnimationFrame

 

requestAnimationFrame是浏览器自带的api,传入参数为动画效果的执行函数。

因为是浏览器自带的函数,所以执行动画的频率和浏览器显示频率是一致的(目前大部分浏览器显示频率为16.7ms,即1000/60ms),并且在切换到别的tab页之后,也就是页面没被激活时是不执行动画的。和setInterval setTimeout相比,执行堵塞的情况少。

回调函数可以自己定义,所以相对于css3的动画方法又有很多灵活性。比如动画执行曲线,完全可以自己定义。

 

举个使用requestAnimationFrame的栗子:

<!DOCTYPE html>
<html>
<head>
    <title>requestAnimationFrame</title>
</head>
<body>
    <canvas id="demo" width="500" height="500"></canvas>
</body>
<script>
    requestAnimationFrame = window.requestAnimationFrame || //webkit
            window.mozRequestAnimationFrame ||  //FF
            window.msRequestAnimationFrame ||   //IE
            window.oRequestAnimationFrame ||    //Opera
            function( callback ){
                setTimeout( callback, 1000/60);
            };

    function round(){
        context.clearRect(0, 0, canvas.width, canvas.height); //清空画布
        var time = new Date().getTime()*0.002;
        var x = Math.sin( time ) * 96 + 128;
        var y = Math.cos( time*0.9 )*96 +128;
        context.beginPath();
        context.arc(x, y, 10, 0, 2*Math.PI);
        context.closePath();
        context.fillStyle = red;
        context.fill();
        requestAnimationFrame( round );
    }

    function start(){
        canvas = document.getElementById(demo);
        context = canvas.getContext(2d);
        requestAnimationFrame( round );
    }

    start();
</script>
</html>

 

当然,人无完人,这个方法也是有缺陷的,那就是浏览器兼容性。RequestAnimationFrame浏览器支持情况如下:

bubuko.com,布布扣

IE10+

FF22+

chrome28+

Safari6+

Opera16+

 

不过有方案来处理兼容性问题,那就是将RequerstAnimationFrame方法和setTimeout结合:

 

(function(){
        var lasttime = 0;
        var vendors = [‘webkit‘, ‘moz‘];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; x ++){
            window.requestAnimationFrame = window[ vendors[x] + ‘RequestAnimationFrame‘ ];
            window.cancelRequestAnimationFrame = window[ vendors[x] + ‘CancelAnimationFrame‘ ];
        }
        if( !window.requestAnimationFrame ){
            window.requestAnimationFrame = function( callback ){
                var curtime = new Date().getTime();
                var timeToCall = Math.max(0, 16.7 - ( curtime - lasttime) );
                var id = setTimeout(function(){
                    callback( curtime + timeToCall );
                }, timeToCall);
                lasttime = curtime + timeToCall;
                return id;
            };
        }
        if( !window.cancelRequestAnimationFrame ){
            window.cancelRequestAnimationFrame = function( id ){
                clearTimeout( id );
            };
        }
    })();

 

 

 

参考文章:

http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html

http://www.cnblogs.com/rubylouvre/archive/2011/08/22/2148797.html

做动画的一大接口 requestAnimationFrame,布布扣,bubuko.com

做动画的一大接口 requestAnimationFrame

标签:des   style   blog   http   color   使用   

原文地址:http://www.cnblogs.com/it-snail/p/3851553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!