Raphael JS - 沿其路径动画半圆答案

【问题标题】：Raphael JS - Animating a semi-circle along its pathRaphael JS - 沿其路径动画半圆
【发布时间】：2013-04-02 20:27:17
【问题描述】：

我有一个仪表/刻度盘类型级别要在我的应用程序中进行动画处理。当值发生变化时，指针和刻度盘将自动更新。对于小的更改，我必须编写的代码可以正常工作，但是当它有较大的更改时，动画不会沿着半圆的路径前进。

我的代码是这样的：（间隔只是为了测试）

var rad = Math.PI / 180;
var getCurvePath = function(cx, cy, r, startAngle, endAngle) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);

    return ["M", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2];
};

var zeroAngle = 197, fullAngle = -15,baseAngle = 199,
    r = Raphael('level');

var level = r
    .path(getCurvePath(150, 150, 75, zeroAngle, baseAngle))
    .attr({
        'stroke': '#FF0000',
        'stroke-width': '11px'
    });

window.setInterval(function() {
    var ratio = Math.random();
    var newLevelAngle = (zeroAngle - fullAngle) * ratio;
    level.animate({
        'path': getCurvePath(150, 150, 75, newLevelAngle, baseAngle)
    }, 1000, 'bounce');
}, 2000);

我在这里设置了一个 JS Fiddle，所以你可以看到它的实际效果：http://jsfiddle.net/Rfd3v/1/

【问题讨论】：

标签： javascript animation raphael

【解决方案1】：

此处接受的答案解决了我的问题： drawing centered arcs in raphael js

我需要从@genkilabs 的答案中调整一些内容以适应液位/仪表应用程序。希望这可能对其他人有所帮助：

var arcCentre = { x: 100, y: 100 },
    arcRadius = 50,
    arcMin = 1, // stops the arc disappearing for 0 values
    baseRotation = -100, // this starts the arc from a different point
    circleRatio = 220/360, // I found this helpful as my arc is never a full circle
    maxValue = 1000; // arbitrary        

// starts the arc at the minimum value
var myArc = r.path()
         .attr({
             "stroke": "#f00",
             "stroke-width": 14,
             arc: [arcCentre.x, arcCentre.y, arcMin, 100, arcRadius],
         })
         .transform('r'+ baseRotation + ',' + arcCentre.x + ',' + arcCentre.y);

// set a new value
var newValue = 234; // pick your new value

// convert value to ratio of the arc to complete
var ratio = newValue / maxValue;

// set level
var newLevelValue = Math.max(arcMin, ratio * 100 * circleRatio);
myArc.animate({
    arc: [arcCentre.x, arcCentre.y, newLevelValue, 100, arcRadius]
}, 750, 'bounce');

【讨论】：