1

见 jsfiddle

这是我的代码：

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);

问题是在中间动画中它不遵循圆形路径，而是得到了这个奇怪的扁平化的东西：

如何使动画始终保持圆形？

我本质上想创建一个“加载馅饼”。馅饼应该动画成一个完整的圆圈。

从“空”到 60% 的动画看起来更糟：http: //jsfiddle.net/mnbayazit/Fh43X/3/

4

1 回答 1

1

在挖掘了他们的一些例子后想通了。

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);
于 2013-02-17T00:10:31.390 回答