問題描述
如何製作流暢的圓弧動畫？ (How to create smooth circular arcing animation?)
see jsfiddle
Here's my code:
var paper = Raphael("holder");
function sector(cx, cy, r, startAngle, endAngle) {
var x1 = cx + r * Math.cos(‑startAngle),
y1 = cy + r * Math.sin(‑startAngle),
x2 = cx + r * Math.cos(‑endAngle),
y2 = cy + r * Math.sin(‑endAngle);
return ['M', cx, cy, 'L', x1, y1, 'A', r, r, 0, +(endAngle ‑ startAngle > Math.PI), 0, x2, y2, 'z'];
}
var path = paper.path(sector(200, 200, 107, 0, 0.25)).attr({
'fill': '#fff',
'fill‑opacity': 0.5,
'stroke': 'none'
});
path.animate({
path: sector(200, 200, 107, 0, Math.PI / 2)
}, 1000);
The problem is that in the intermediate animation it doesn't follow a circular path, I get this weird flattened thing instead:
How do I make the animation remain circular throughout?
I essentially want to create a "loading pie". The pie should animate into a full circle.
Animating from "empty" to 60% looks even worse: http://jsfiddle.net/mnbayazit/Fh43X/3/
‑‑‑‑‑
參考解法
方法 1:
Figured it out after digging through some of their examples.
var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
var flag = (a2 ‑ a1) > 180,
clr = (a2 ‑ a1) / 360;
a1 = (a1 % 360) * Math.PI / 180;
a2 = (a2 % 360) * Math.PI / 180;
return {
path: [
["M", x, y],
["l", r * Math.cos(a1), r * Math.sin(a1)],
["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)],
["z"]
]
};
};
var p = r.path().attr({
segment: [200, 200, 100, 0, 0],
stroke: 'none',
fill: '#fff',
'fill‑opacity': 0.5
});
p.animate({
segment: [200, 200, 100, 0, 359]
}, 2000);