这似乎只有在我尝试在Chrome上对图像进行动画处理时才会发生。我要做的就是使图像在Raphaël.js中来回移动。我创建了一个说明问题的jsfiddle。我非常确定它曾经在Chrome中运行,因为我使用它来进行开发,而且在更高版本的Chrome中似乎已被破坏。例如,当我将图像更改为rect时,它似乎可以正常渲染。当您调整包含动画的屏幕的大小时,它将重新绘制。
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。
我该如何解决这个问题?
最佳答案
是的,Chrome似乎将rect识别为脏污并拒绝重新粉刷似乎存在问题。您可以通过将鼠标悬停在该区域上来查看其工作情况。
我使用“变形”而不是实际位置尝试了相同的动画。显然,正确地转换对象可以告诉现代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();
我还添加了一些缓动(
">"
)以使其更自然地反弹。