使用Snap.svg为​​关于端点的SVG线设置动画

Question

我有以下代码，当你点击灰色半圆时会发生两个动画，我非常接近我的预期结果，但是线路动画动画关于一个点动画但是这个点似乎移动了结束，我希望它围绕它的端点旋转，这样我就不会移出端点所在的圆圈。

jsfiddle更清楚地看到我在说什么以及眼前的问题。

**您必须单击灰色圆圈才能激活动画**

console.clear();

var loop = "M31,201.1C16.6,118.8,69.1,40.5,150.7,26c32.5-5.8,64.5-1.6,93.7,14.5c59.1,32.6,88.4,94,77.1,159.1";
var pin = "M180.4,193.3c-1.8,0-3.5-0.9-4.4-2.6c-1.3-2.4-0.5-5.5,2-6.8L309.8,111c2.4-1.3,5.5-0.5,6.8, 2c1.3,2.4,0.5,5.5-2,6.8l-131.8,72.9C182.1,193.1,181.2,193.3,180.4,193.3z";
var circle_svg = "M-224.1,227.9c-5.1,5.1-5.1,13.4,0,18.5s13.4,5.1,18.5,0s5.1-13.4,0-18.5C-210.8,222.8-219,222.8-224.1,227.9z";

var loopLength = Snap.path.getTotalLength(loop);

console.log(loopLength);

var s = Snap();

circle = s.path({
  path: loop,
  fill: "gray",
  stroke: "#c00",
  strokeWidth: 0,
  strokeLinecap: "round"
});

var g = s.gradient("l(0, 0, 1, 1)#80DFFE-#0CA5EE-#07A3EE");

circleOutline = s.path({
  path: Snap.path.getSubpath(loop, 0, 0),
  stroke: g,
  fillOpacity: 0,
  strokeWidth: 0,
  strokeLinecap: "round"
});



circle_middle = s.path({
  path: circle_svg,
  stroke: "#000000",
  fill: "#ffffff",
  strokeWidth: 5,


});

pin_line = s.path({
  path: pin,
  fill: "#000000"

});

// +"t"+[translateX,translateY]


circle_middle.attr({
  transform: "t" + [400, -65]
});
pin_line.attr({
  transform: 'r-170,180,180'
});
circle.click(function(e) {

  Snap.animate(0, loopLength,
    function(step) { //step function

      circleOutline.attr({
        path: Snap.path.getSubpath(loop, 0, step),
        strokeWidth: 25
      });

    }, // end of step function
    800 //duration

  ); //Snap.animate

  pin_line.animate({
    transform: 'r30,180,180',
    translate: '20, 20, 85, 85'
  }, 1000);


}); //click the circle

svg {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Answer 1

所以确实存在对齐问题，我试图在Illustrator中修复它，然后回到你的例子，并意识到JS中的一些转换实际上是如何工作的，并且能够调整它们以最终看起来正确，但是当我尝试使用你的路径调整变换时，即使在旋转之外将t（ranslations）应用于pin_line，我也无法做到正确。因此，要么需要替换的路径与对旋转点的微调进行组合，要么我完全不了解如何使用snapsvg代码。 :)无论如何，我得到了一个小提琴作品，其中包含了我在Illustrator中创建的一些新路径坐标以及对JS的一些更改：https://jsfiddle.net/14e107mt/4/除了路径更改之外，它还注释了{{1翻译（因为它现在默认对齐），并将circle_middle旋转坐标更改为

pin_line

和

pin_line.attr({ transform: 'r-170 176 172' });

而不是pin_line.animate({ transform: 'r30 176 172' }, 1000 ); 。