Question

我正在尝试锻炼仪表图表的动画。但是，在制作动画时，弦的尖端会超出椭圆的圆周。这fiddle解释了我所面临的问题。

预期输出：动画时，尖端应保持在椭圆内。

在这里，我使用snap.svg库为和弦设置动画。

我尝试实现此动画的代码是：

var snapper = Snap("svg");

Snap.animate([-230],[0],
function(val){
    snapper.select("#meter").attr({
        "transform":"scale(1 1) rotate(" + val[0] + " 242.5 208)"
    });
},10000,mina.linear);

感谢任何帮助。

提前致谢!!!

Answer 1

这不是一个完整的答案，而是对您的问题的调查。

首先，您应该使用标准化值绘制针（使用要在0,0中旋转的中心），然后使用translate将图形移动到显示的中心。这样可以更容易地旋转它。例如：

<defs>
<g id="meter">
        <line x1="4.24" y1="-9.195" x2="194.35" y2="25.935"/>
        <line x1="0" y1="9.195" x2="194.35" y2="25.935"/>
        <line x1="0" y1="9.195" x2="-9.89" y2="-1.555"/>
        <line x1="4.24" y1="-9.195" x2="-9.89" y2="-1.555"/>
</g>
</defs>

然后在想要旋转它的地方绘制它：

<use xlink:href="#meter" transform="translate(241.88,198.1)" />

现在它将相对于原点0,0进行缩放，并且不会在屏幕上移动。

您也可以获得相同的结果，将中心坐标添加为scale变换的参数，如@Ian所示：

scale(1 1 241.88 198.1)

另一个问题更复杂。针的长度必须是曲线中每个点的半径。如果您有该半径，则按比例缩放。半径可以作为角度的函数计算，但是您使用的是贝塞尔曲线，而不是弧线，因此它不是一个简单的公式。我不确定，但我认为有一些SVG库具有与弧相近的函数。你可能想要提出这个问题（如何获得特定角度的贝塞尔曲线中的半径坐标）作为一个单独的问题（在SO或数学堆栈交换中）。

下面是近似值（仅覆盖90度）并使用基于正弦和对数函数的校正。如果您不需要确切的东西，它可能适合您。我简化了SVG，只保留了必要的部分。

var snapper = Snap("svg");
Snap.animate([-100,0.72,0.89],[-10,1,1],
    function(val) {
        var dim = val[1];
        var corr = (Math.sin(2*(val[0]+10)*Math.PI/180))*Math.log(val[2]);

        snapper.select("#meter").attr({
        "transform":"scale("+(dim-corr)+" "+(dim-corr)+") rotate(" + val[0] + " 0 0)"
        });
    }, 10000, mina.linear);

在此处查看：JSFiddle。您可以将其作为起点，并尝试使其适应您的问题。

Snap svg米图表动画

1 个答案: