用 Raphael JS 制作弧线动画在 Chrome 中摇摆不定 [英] Animating an arc in Raphael JS wobbles in Chrome
本文介绍了用 Raphael JS 制作弧线动画在 Chrome 中摇摆不定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的动画中看到一个恼人的摆动,我已经删除了包含实际动画的代码:
I am seeing an annoying wobble in my animation, I have stripped out the code which contains the actual animation:
var side = 400;
var paper = new Raphael($(this), 100, side);
paper.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
var arcWidth = 180 - 120;
var strokeRadius = (120 + arcWidth/2);
var indicatorArc = paper.path().attr({
"stroke": "#4B6384",
"stroke-width": 100,
arc: [side/2, side/2, 0, 100, strokeRadius]
});
indicatorArc.animate({
arc: [side/2, side/2, 75, 100, strokeRadius]
}, 1500, "<>", function(){
// anim complete here
});
我已经把它放在一个 jsfiddle 中让你自己看,请检查 firefox 和 chrome,你会注意到 chrome 的边缘大幅摆动,我能做些什么来消除这种情况?
I have put it in a jsfiddle for you to see for yourself, please check in firefox and chrome, you will notice in chrome the edges wobble substantially, is there anything I can do to eliminate this?
在这里摆弄:多次运行
推荐答案
所以我知道这已经两年多了,但是如果有人遇到这个问题,那是 Chrome 2D 绘图引擎中的一个已知错误.
So I know this is over two years old now, but if anyone comes across this issue, it's a known bug within Chrome's 2D drawing engine.
https://code.google.com/p/skia/问题/详细信息?id=2769
这篇关于用 Raphael JS 制作弧线动画在 Chrome 中摇摆不定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文