1

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

预期输出：在制作动画时，尖端应该很好地保持在椭圆内。

在这里，我使用 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);

任何帮助表示赞赏。

提前致谢！！！

4

1 回答 1

2

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

首先，您应该使用标准化值（您希望在 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。您可以将其用作起点并尝试使其适应您的问题。

于 2014-04-09T15:00:30.707 回答