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 に答える