Question

我使用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);
});

Answer 1

缓冲是一种用于防止动画伪影的技术（撕裂，正如JamWaffles指出的那样）。如果您查看this Stack Overflow question的答案，您将找到有关启用缓冲的SVG设置的信息，但到目前为止主浏览器似乎并不支持。

大型SVG / Raphael圈在动画时会扭曲

1 个答案: