Raphael JS -沿着它的路径动画一个半圆

Raphael JS - Animating a semi-circle along its path

本文关键字：半圆 一个 动画 JS 路径 Raphael      更新时间：2023-09-26

我在我的应用程序中有一个仪表/表盘类型的动画水平。指针和表盘将在值改变时自动更新。我已经得到的代码工作OK小的变化，但当它有较大的变化，动画不沿着半圆的路径。

我的代码是这样的:(间隔只是为了测试的目的) 
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/

这个公认的答案整理了我的问题:在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');
相关文章：