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 指出的撕裂）的技术。如果您查看此 Stack Overflow 问题的答案，您会发现有关 SVG 设置以打开缓冲的信息，但到目前为止，主要浏览器似乎不支持它。

于 2012-09-13T11:50:22.243 回答