Question

我是拉斐尔的初学者。任何人都可以告诉我如何用动画制作圆环/径向图表，类似于这些。

http://dribbble.com/shots/670348-Segment-Graphs

我现在正在努力。到目前为止，我已经走到了这一步。随着我的进步，我会更新。我现在的总结块正在为外圈的颜色变化设置动画。

window.onload = function () {

    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);

    // Creates circle at x = 50, y = 40, with radius 10
    var circle1 = paper.circle(50, 40, 40);

    var circle2 = paper.circle(50, 40, 20);

    circle2.attr("fill", "#fff");
    circle2.attr("stroke", "#fff");

    circle1.attr("fill", "#336699");
    circle1.attr("stroke", "#fff");

}

Answer 1

<强>现金：在raphael website上有一个使用弧的示例。有关类似主题的stackoverflow还有另一个问题：drawing centered arcs in raphael js。接受的答案有一个简化和注释版本的代码最重要的部分，另外还有一个jsfiddle链接显示代码在行动：http://jsfiddle.net/Bzdnm/2/

所以我做了：我从linked question获取了代码，并将其与eve相结合，这是由RaphaelJS的creator制作的另一个javascript库，我得到的是：http://jsfiddle.net/cristighenea/aP7MK/

一目了然：

1.创建圆弧后，我们将其旋转180度并开始制作动画：

theArc.rotate(180, 100, 100).animate({
    arc: [100, 100, amount, 100, 40]
}, 1900, function(){
    //animation finish callback goes here
});

2.使用前夕我们将事件绑定到* raphael.anim.frame。**

3.事件被触发的每个时间我们使用弧的新值

更新中间的文本

如果您有任何疑问，请告诉我

与拉斐尔的甜甜圈/径向图表

1 个答案: