我已经可以使用下面的代码成功地沿着圆弧的路径创建一个圆弧动画
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
是一样的,是错误的吗?
谢谢你的帮助
我不能给出一个有教养的答案,但通过适应这个例子解决了我的问题:http://jsfiddle.net/7jHPv/5/在这个问题中引用:在Chrome中绘制Raphael JS的弧形动画
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
});