requestAnimFrame 动画的使用方法

最新推荐文章于 2025-06-25 22:00:44 发布

原创最新推荐文章于 2025-06-25 22:00:44 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#requestAnimFrame 动画的使用方法

web前端专栏收录该内容

203 篇文章

订阅专栏

本文介绍了一种兼容所有浏览器的requestAnimFrame封装方法，该方法用于实现平滑的动画效果。通过示例代码展示了如何在Canvas上绘制动态图形，包括设置画布尺寸、颜色填充及动态坐标计算。

//requestAnimFrame 封装，可以兼容所有浏览器

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, toggle;

init();
animate();

function init() {

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

    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 ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;

    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();

}