Animation 捕捉图表动画

我正在尝试锻炼米表的动画。但是，在设置动画时，弦的尖端超出椭圆的圆周。这就解释了我面临的问题

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

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

感谢您的帮助

---

提前感谢

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

首先，您应该使用规格化值（希望旋转的中心为0,0）绘制指针，然后使用“平移”将图形移动到显示的中心。这样可以更容易地旋转它。例如：

<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> 

另一个问题更为复杂。针的长度必须是曲线中每个点的半径。如果你有这个半径，你可以按比例缩放它。半径可以作为角度的函数来计算，但您使用的是贝塞尔曲线，而不是圆弧，因此这不是一个简单的公式。我不确定，但我认为有些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);

---

请看这里：。您可以将其作为起点，并尝试调整它以适应您的问题。

您需要找到一个可以用来缩放仪表的角度函数。我去掉了你小提琴中不相关的部分，用一个线性值进行了实验，但它并不精确。但这可能是一个起点：我试过这个：。在这里，在我的例子中，每当我尝试缩放指针时，它都会改变其中心，这是不期望的，尽管我正在硬编码值，即旋转（“+val[0]+”242.5 208）。你能指出我哪里做错了吗！您需要考虑从点0,0开始的刻度。你可以通过设置它的中心来解决这个问题，所以我建议你编辑你的SVG，如果你在进一步的问题中使用它，只留下基本的部分（比如我在回答中使用的部分）。尺度、阴影等与问题无关，它们使问题变得更复杂、更难理解。干杯@helderdarocha。谢谢你如此详细和翔实的回答。这真的帮了我很大的忙。我已经按照您的建议部分实现了米图表动画，并将尽快添加一个小提琴。现在，我被这件事困住了。请查看我的最新评论。

scale(1 1 241.88 198.1)

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);