18

Raphael を使用してページに追加する SVG オブジェクトがあります。6 セットでおよそ 175 のパスがあるため、複雑であると思われます。

.animate 関数を使用して 6 セットのそれぞれをアニメーション化しています

function anim(direction, duration){
    return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths 
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000));  // 25 paths

$(window).load(function(){                      
    IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">");  // 32 paths
    IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">");   // 29 paths
    IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}

問題は、一部のブラウザーでは、これが非常にぎこちなく見えることです。

Mac ではバターのようにスムーズです (テスト済み: FF、Chrome、Safari)。Chrome の Windows でも素敵ですが、Windows FF、Safari、または IE8 をロードすると、アニメーションが途切れ途切れになり、少し途切れます。

iPadでも見栄えがします！

私はそれらをすべて見栄え良くしたいと思っています...だから私はFFとSafariですべてのパワーを犠牲にしているものが何であるかを理解しようとしています. IE8 も同様に修正されます)。

Raphael の途切れ途切れのアニメーションについて私が見た他の質問から、アニメーション関数にタイムアウトを追加するために「内臓に入る」という言及が見られます... (raphael-min.js に見られるように)

cz= window.requestAnimationFrame||
    window.webkitRequestAnimationFrame||
    window.mozRequestAnimationFrame||
    window.oRequestAnimationFrame||
    window.msRequestAnimationFrame||
    function(a){setTimeout(a,16)}, /* there is a function here that animates */

たとえば FF のように見えますが、RequestAnimationFrame は setTimeout よりもスムーズなパフォーマンスを提供します。(私は mozRequestAnimationFrame 条件を削除してリロードすることでこれをテストし、タイムアウトのさまざまな間隔を試しました)

アニメーションのクロス ブラウザー フレーム レートを改善するのに役立つ可能性がある、他に不足している可能性のあるものはありますか?

たとえば、画像はデフォルトの 500x500 で、画像の中心 (ポイント 250x250) を中心に回転が行われていますが、画像は 1000x1000 でページに表示されています (ビューポートはページの読み込み時にスケーリングを行います)。

デザイナーに画像のサイズを 1000x1000 のキャンバスに変更してもらい、最初からフルサイズで表示すると、ブーストが得られる可能性はありますか? たぶん「よりスムーズな乗り心地」？SVG アニメーションとパフォーマンスに影響を与える要因が何であるかはわかりません。

4

1 に答える 1