1

Raphael を使用して円をアニメーション化しています。円が大きいと、移動時に円の周りにアーティファクトが発生します。クリッピング/再描画領域の問題のようで、回避策があるかどうか疑問に思いましたか?

Firefox では問題ないように思われ (少しぎこちなくても)、Chrome では非常に確実に表示されます。また、塗りつぶしプロパティで不透明度を使用することによっても悪化します。rgba(255,0,0,0.7)

これは、問題を示すjsFiddleです。円を移動するには、右側の紙の周りをクリックするだけです。

コード：

var discattr = {
    fill: "#666",
    stroke: "none",
    width: 35
};

var paper = Raphael("svgcontainer", 400, 400);

circle = paper.circle(150, 150, discattr.width, discattr.width).attr({
    stroke: "none",
    fill: "rgba(255,0,0,0.7)"
});

var coords = []

var animateCircle = function(coords) {
   if (!coords.length) return;
   var nextCoords = coords.shift()
   var move = Raphael.animation(nextCoords, 500, "linear", function() {animateCircle(coords)});
   circle.animate(move);
}    

$("#svgcontainer").on("mouseup", function(e) {
    coords.push({cx: e.pageX, cy: e.pageY})

    animateCircle(coords);
});
4

1 に答える 1

1

バッファリングは、アニメーションのアーティファクトを防ぐために使用される手法です（JamWafflesが指摘しているように、ティアリング）。このStackOverflowの質問に対する回答を見ると、バッファリングをオンにするSVG設定に関する情報が見つかりますが、これまでのところ、主要なブラウザではサポートされていないようです。

于 2012-09-13T11:50:22.243 に答える