6

CSSトランジションを開始するためにアニメーションフレームをリクエストすることは意味がありますか?

たとえば、Mozilla CSSトランジションページには、次のjsfiddleの例へのリンクが含まれています。

CSS:

#foo{
    border-radius:50px;
    width:50px;
    height:50px;
    background:#c00;
    position:absolute;
    top:0;
    left:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s;  
}

JavaScript:

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);    

この例を次のように書き直すのは意味がありますか?(このjsfiddleを参照してください)

JavaScript:

var rAF = window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame;
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    rAF(function() {
        f.style.left = (ev.clientX-25)+'px';
        f.style.top = (ev.clientY-25)+'px';
    });
},false);

答えてくれてありがとう。

4

2 に答える 2

3

質問が古いことは知っていますが、これは誰かにとって役立つかもしれません。

この例ではrAF(requestAnimationFrame)は役に立ちません。CSSトランジションで要素をスライドさせ、rAFを1回呼び出すためです。ブラウザごとに CPU と GPU のパフォーマンスを最適化するには、フレームごとに rAF を呼び出してプロップの変更をループする必要があります。

rAF についての主なアイデア:

css アニメーションなしで dom 要素をアニメーション化する場合、要素のスタイル プロパティ(幅、高さ、上、左など) を定期的に変更する必要があります。

rAF がなければ、setTimeout、setInterval 関数を使用して、時間に応じて props を変更する必要があります。しかし、ブラウザーはこれらのプロセスを最適化しないため、CPU や GPU のパフォーマンスが低下する可能性があります。

rAF を使用すると、最新のブラウザーは CPU や GPU の使用量を抑えてアニメーションのパフォーマンスを最適化できます。

便利なリンク:

スマート アニメーション用の requestAnimationFrame

requestAnimationFrame

于 2015-04-02T11:13:58.483 に答える