私の最初のブログ:requestAnimationFrame学習ノート

12064 ワード

アニメーション

通常、ブラウザでアニメーションを書くにはどのような技術が使われますか?
flash
非常に複雑なアニメーションを実現することができますが、HTML 5が成熟するにつれて、個人的にはflashが明日の黄花になるような気がします.
css3
現在、ほとんどの現代ブラウザはcss 3をサポートしています.transformで2 D/3 D変換を実現し、transitionで要素遷移効果を実現し、animationとkeyframesを組み合わせて複雑なアニメーションを実現します.しかもcss 3でアニメを書くメリットは、間違いを報告しないことです.私たちが脚本を書くときは文法の間違いがよくありますが、cssはできません.ブラウザがルールを知らないと役に立たないのではないでしょうか.(PS:ie 6などのアンティークブラウザをサポートする必要がある学生がいます.HTML 5やCSS 3の新しい属性を使うときは、このサイトに行くことができます.http://caniuse.com/主流ブラウザやブラウザの各バージョンで使用する新しい機能のサポート状況を調べると、作業効率が向上します.
jsタイマsettimeout/setInterval
タイマーをセットしてループでhtml要素を動かすことができます~これはみんなが使います

しかし、今日登場するのはHTML 5のrequestAnimationFrameです.
第1感じ、名前はとても长くて、翻訳して“アニメーションのフレームを求めます”のようです.どんなメリットがありますか?HTML 5がこのAPIを発売したのは、主にアニメーションの性能を最適化するためだ.
なんというか、fps(画面毎秒伝送フレーム数)は多くのディスプレイで60で、対応する表示周波数は16.7 ms/回です.したがって、タイマを設定するときにこの値よりも間隔が低い場合、フレームによってはペイントできないものもあります.これにより、いわゆる「トランジションペイント」が発生し、アプリケーションのパフォーマンスに影響を与える可能性があります.requestAnimationFrameはブラウザの描画間隔に従って歩き、移行せずに描画し、リソースを効率的に利用し、自然にスムーズ~各ブラウザのサポートも良い(詳細は以下を参照:http://caniuse.com/#search=requestanimationframe)

余計なことを言って、コードを見てみましょう.
　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>An Example：requestAnimationFrame&amp;canvas</title>
        <style type="text/css">
            html{
                background: #000;
            }
        </style>
    </head>
    <body>
        <script>
            (function(){
                window.requestAnimationFrame=　　//    
                    window.requestAnimationFrame||
                    window.webkitRequestAnimationFrame||
                    window.mozRequestAnimationFrame||
                    window.oRequestAnimationFrame||
                    window.msRequestAnimationFrame||
                    function(callback,element){
                        window.setTimeout(callback,1000/60);
                    };
                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(){
                    requestAnimationFrame(animate);　　//requestAnimationFrame               
                    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();
                }
            })();
        </script>
    </body>
</html>

この例はcanvasの絵にも触れていますが、ついでにcanvas apiも固めてください.

reference:
http://www.webhek.com/requestanimationframe/
http://www.zhangxinxu.com/wordpress/tag/requestanimationframe/

PTA 7-23貨幣価値変換C言語

【翻訳】Ext JSの最新テクニック――2014-8-13