0

こんにちは私はjqueryanimateを使用してズームインとズームアウトを行っています。問題は、速度が遅すぎて時間がかかりすぎることです。アニメーション機能は、約100のdivをズームします。誰かがそれを最適化するために何をすべきか教えてもらえますか？これが以下のコードです

        //Zoom In by clicking the plus button
        $("div#explanation .plus").click(function(){
        jsPlumb.repaintEverything();
/*              var strongFont = parseFloat($("div.window strong").css('font-size'));
            var newStrongFont = strongFont + 2;
            //alert("the new font is"+strongFont);
*/
            $("div#demo1").animate({'height':'+=20', 'width':'+=20'});
            $("div.window ").animate({
                    'height':'+=20px', 'width':'+=20px'
                },0,function(){
                    jsPlumb.repaintEverything();
            });

    /*              $("div.window strong").animate({
                    fontSize:newStrongFont
            },0,function(){
                jsPlumb.repaintEverything();

            });
                    */              
        });

私はズームアウトに似ています。案内してください。ありがとう！

4

3 に答える 3

1

まず、何百もの要素をアニメーション化することで、ほぼ確実に優れたパフォーマンスが得られないことを理解する必要があります。ブラウザが処理するには多すぎます。単一のコンテナ要素をアニメーション化して、目的の効果を実現しようと思います。

そうは言っても、 animate-enhancedプラグインを見てみたいと思うかもしれません。CSSアニメーションをサポートするブラウザでは、プラグイン.animate(...)は呼び出しをCSSアニメーションに自動的に変換します。これは通常、ハードウェアアクセラレーションです。animateこれにより、設定された間隔で要素のプロパティを変更する通常の方法よりもはるかに優れたパフォーマンスが得られます。

プラグインが役に立たない場合は、CSSアニメーションを直接使用することもできます。ボックスのサイズを実際にアニメーション化しようとしているのか、実際のズーム（ボックスとそのすべてのコンテンツが大きくなる）をアニメーション化しようとしているのかはわかりませんが、後者をアニメーション化する例を次に示します。：

div {
    width:200px;
    height:200px;
    background:red;
    color:white;
    margin:20px 50px;
    padding:5px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

div:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-animation-name: popin;
    -moz-animation-name: popin;
    -webkit-animation-duration: 350ms;
    -moz-animation-duration: 350ms;    
}
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.4);
    }
}
@-moz-keyframes popin {
    from {
        -moz-transform: scale(1);
    }
    to {
        -moz-transform: scale(1.4);
    }
}
于 2012-08-29T18:13:06.927 に答える
0

アニメーションが完了するまでの時間は、の2番目の引数として指定できる時間です.animate()。指定していないため、デフォルトは400msです。好きなように設定できます。アニメーションは常に設定した時間とほぼ同じ時間で完了しますが、その時間内にコンピューターがスムーズなアニメーションを表示するために行う作業が多すぎると、ジャンプするアニメーションになります。

アニメーションのジャンプを少なくする唯一の方法は、アニメーションの内容またはアニメーションの方法を最適化することです。数百のdivを同時にアニメーション化することは、おそらく何よりも重要ですが、非常に高速なコンピューターでスムーズに実行できます。

あなたはおそらくあなたがアニメートしているものを再考したいと思うでしょう。このような場合に考えられる回避策の1つは、コンテンツが非常に複雑でパフォーマンスが優れている場合に、コンテンツ全体ではなくアウトラインをアニメーション化することです。

さらにサポートが必要な場合は、問題の詳細を表示する必要があります。あなたが実際にアニメーション化しようとしているものを確認できるように、あなたが持っているHTMLを確認する必要があります。おそらく、repaintEverything()関数が何をしているのかを確認する必要があります。

于 2012-08-29T17:57:34.197 に答える
0

古いブラウザについてあまり心配していない場合は、これにcss変換プロパティを使用できる可能性があります。これらは通常、非常に高速に動作するため、ドキュメントの複雑なセクションを効率的に拡大できます。これは不自然な例です。jQueryを使用して、クリックされるたびに何かにズームインします。アニメーションはもっと複雑になります。jQueryのアニメーションが変換で機能するとは思いませんが、理論的には、タイムアウトを使用して小さなレベルでスケールを繰り返し調整できます。

于 2012-08-29T18:16:28.080 に答える