Question

似乎只有在我尝试在Chrome上制作图片动画时才会发生这种情况。我想做的就是让一张图像在Raphaël.js中向后移动。我创建了一个说明问题的jsfiddle。我非常确定它曾经在Chrome中使用，因为我使用它进行开发，而且在以后的Chrome版本中它似乎已被打破。当我将图像更改为矩形时，例如它似乎渲染得很好。当您调整包含动画的屏幕时，它会重新绘制。

http://jsfiddle.net/k69yzz0o/1/

var moveForth = function () {
    useControl.animate({x : 38, y: 0}, 900, moveBack);
};

var moveBack = function () {
    useControl.animate({x : 0, y: 0}, 600, moveForth);
};

var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();

它只发生在Chrome中，我使用最新的Raphael.js 2.1.2。

如何解决此问题？

Answer 1

是的，Chrome似乎存在问题，将矩形识别为脏，并拒绝重新绘制。你可以看到它通过鼠标悬停在该区域上工作。

我使用Transform尝试相同的动画，而不是使用实际位置。明显正确地转换对象会告诉现代Chrome重绘该区域。

这里有效：

var moveForth = function () {
    useControl.animate({"transform":"T38,0"}, 900, ">", moveBack);
};

var moveBack = function () {
    useControl.animate({"transform":""}, 600, "<", moveForth);
};

var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();

我还添加了一些缓动（">"）以使其更自然地反弹。

Raphael.js图像的动画不会在chrome中重新绘制

1 个答案: