一个新的动画接口: requestAnimationFrame

最新推荐文章于 2024-06-21 08:42:30 发布

abxn2002

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量810

点赞数

分类专栏： javascript学习笔记文章标签： function callback javascript 浏览器 date layer

javascript学习笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

转载地址: http://www.cnblogs.com/lbsgood/archive/2012/06/04/2534279.html

传统的 javascript 动画无非就是用setInterval函数来实现，这对于简单或对流畅性要求不高时不会有什么问题，但现在随着对用户体验的关注度不断提高，对动画的复杂程度和流畅性都有了更高的要求，传统动画显得捉襟见肘了。为解决此问题浏览器提供了一个统一帧管理、提供监听帧的API，即requestAnimationFrame……

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

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      window.oRequestAnimationFrame      ||
      window.msRequestAnimationFrame     ||
      function(/* function */ callback, /* DOMElement */ element){
        window.setTimeout(callback, 1000 / 60);
      };
})();

demo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>requestAnimFrame</title>
<script>

      // requestAnim shim layer by Paul Irish
			window.requestAnimFrame = (function(){
				return  window.requestAnimationFrame       ||
				  window.webkitRequestAnimationFrame ||
				  window.mozRequestAnimationFrame    ||
				  window.oRequestAnimationFrame      ||
				  window.msRequestAnimationFrame     ||
				  function(/* function */ callback, /* DOMElement */ element){
					window.setTimeout(callback, 1000 / 60);
				  };
			})();


      // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

      var canvas, context;

      function init() {

        canvas = document.createElement( 'canvas' );
        canvas.width = 256;
        canvas.height = 256;

        context = canvas.getContext( '2d' );

        document.body.appendChild( canvas );

      }

      function animate() {
        requestAnimFrame( animate );
        draw();

      }

      function draw() {

        var time = new Date().getTime() * 0.002;
        var x = Math.sin( time ) * 96 + 128;
        var y = Math.cos( time * 0.9 ) * 96 + 128;

        context.fillStyle = 'rgb(245,245,245)';
        context.fillRect( 0, 0, 255, 255 );

        context.fillStyle = 'rgb(255,0,0)';
        context.beginPath();
        context.arc( x, y, 10, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();

      }
      window.onload = function(){
        init()
        animate();
      }

    </script>

    <script>

    </script>
  </head>
  <body>

</body>
</html>

abxn2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个新的动画接口: requestAnimationFrame

转载地址: http://www.cnblogs.com/lbsgood/archive/2012/06/04/2534279.html传统的 javascript 动画无非就是用setInterval函数来实现，这对于简单或对流畅性要求不高时不会有什么问题，但现在随着对用户体验的关注度不断提高，对动画的复杂程度和流畅性都有了更高的要求，传统动画显得捉襟见肘了。为解决此问题浏览器
复制链接

扫一扫