2

DOMを使用したHTMLのjavascriptによるアニメーションについて質問があります。この場合、絶対位置とcss + jQueryを使用して、divをアニメーション化します。

したがって、位置x、yの大きな配列を実行すると、アニメーションの実行が非常に遅くなります。100ms（80ms）間隔で実行していますが、レンダリングが十分に速くなく、アニメーションに10秒以上かかるようです...

アニメーションを再実行すると、命令が何らかの形でキャッシュされているように見え（レンダリング）、アニメーションは完全に実行されます。

それからまた5分待つとまた遅くなります。（再度使用されなかったため、削除された低レベルのマシンコードメモリのようです？）

アニメーションを初めて実行する場合、アニメーションをスムーズに実行する方法がわかりません。アニメーションをレンダリングするためにfabric.jsを試しました...同じ問題。最初の実行は遅いです。2回目以降はスムーズです。

function render_mouse()
 {
     if(play_pos < mousefile_length)
         {
            $('.mouse').remove();
            $("body").append(
            $('<div id="mouse" class="mouse"></div>')
            .css('position', 'absolute')
            .css('top', play_mousefile[play_pos+1] + 'px')
            .css('left', play_mousefile[play_pos] + 'px')
            .css('width', mousesize)
            .css('height', mousesize)
            .css('background-image', 'url(images/cursor.png')
                    );
            play_pos = play_pos +2;
            }
    else {
        clearInterval(play_mousetimer);
         }
   }

UPDATED:
 $('#mouse').animate({
                 left: rec_mousefile[play_pos]+"px",
                 top : rec_mousefile[play_pos+1]+"px"
                 },80);
4

1 に答える 1

2

毎回マウスdivでそれほど多くの操作を行わなかった場合、アニメーションはより高速になります。

基本的に、最初のレンダリングに必要なすべてのCSSを使用して、マウスをdomに一度追加し、追加された要素への参照をキャッシュしてから、アニメーションに必要なcssプロパティのみを操作します。

要素をdomに保持することで、毎回削除して再追加するのではなく、パフォーマンスが少し向上するはずです。さらに、追加された要素への参照を保存すると、別の更新を行う前にdomを再クエリする必要がなくなります。

キャッシングにより、アニメーションは2回目の実行で常に少し速くなるはずですが、これらの最適化は最初の実行に少なくとも少し役立つはずです。

**コメントに応じて編集**

関数の外部でマウスdivへの参照をキャッシュするか、レンダリング関数自体からハングアップすることができます。

var mouseDiv = $（'＃mouse'）;

function render_mouse()
{
    if(mousefile_length > play_pos)
                {
                 mouseDiv.animate({
                 left: rec_mousefile[play_pos]+"px",
                 top : rec_mousefile[play_pos+1]+"px"
                 },80);

                 play_pos=play_pos+2;
        }
   else {playtimer.stop();}
}

また

function render_mouse()
{
    // query the first time, and then use the cached version thereafter
    render_mouse.mouse = render_mouse.mouse || $('#mouse');
    if(mousefile_length > play_pos)
                {
                 render_mouse.mouse.animate({
                 left: rec_mousefile[play_pos]+"px",
                 top : rec_mousefile[play_pos+1]+"px"
                 },80);

                 play_pos=play_pos+2;
        }
   else {playtimer.stop();}
}
于 2012-06-26T17:59:07.640 に答える