使用 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 代码。 :) 无论如何，我得到了一个 fiddle 工作，它结合了我在 Illustrator 中制作的一些新路径坐标和对 JS 的一些更改： https://jsfiddle.net/14e107mt/4/ 除了路径更改之外，它还注释掉了翻译circle_middle 的翻译（因为它现在默认对齐），并将 pin_line 旋转坐标更改为

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

和

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

而不是 180 180。

使用 Snap.svg 动画关于端点的 SVG 线

Animating SVG line about endpoint with Snap.svg

javascript

css

animation

svg

snap.svg