我已经能够使用此代码
成功地沿着弧的路径设置弧的动画var archtype = Raphael("canvas", 200, 100);
archtype.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
};
};
//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
var my_arc = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 14,
arc: [50, 50, 0, 100, 30]
});
my_arc.animate({
arc: [50, 50, 40, 100, 30]
}, 1500, "bounce");
使用此代码的唯一问题是我需要在页面上有多个画布元素,而且我不想在同一页面上定义archtype.customAttributes.arc
10次。
为了解决这个问题,我想我可以这样做......
function arc (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;
}
var path = arc(50, 50, 0, 100, 30);
var my_arc = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 14,
path:path
});
var path = arc(50, 50, 40, 100, 30);
my_arc.animate({
path:path
}, 1500, "bounce");
然而,当我尝试这样做时,弧的末端采用最直接的路径到新的端点,导致扭曲,变形效果。
任何人都可以解释为什么我的示例会这样做,并建议我为了克服这个问题,而不必为页面上我需要的每个画布声明自定义属性?我是否错误地假设arc: [50, 50, 0, 100, 30]
与path: path
相同?
感谢您的帮助。
答案 0 :(得分:0)
我无法提供有根据的答案,但通过调整此示例解决了我的问题:http://jsfiddle.net/7jHPv/5/在此问题中引用:Animating an arc in Raphael JS wobbles in Chrome
var myArc = r.path().attr({
"stroke": arcColours[i]
, "stroke-width": 6
, arc: [1, 100, muffinRadius, step*(i+1), diagramHeight/2]
});
myArc.animate({
arc: [values[i], 100, muffinRadius, step*(i+1), diagramHeight/2]
}, 1500, "<>", function() {
// anim complete here
});