css - 跟随 svg 运动路径时的偏移量

Question

我刚刚开始使用 svg 和 anime.js。我正在尝试重新创建 svg motion path在文档中找到我自己的 Assets 。不过，我没有使用 div 来跟随路径，而是使用了另一条路径。

我有一个简单的 S 形路径和一个沿着它的圆形路径。我遇到的问题是，当圆圈绕过路径的弯道时，它有某种偏移量。

<svg width="256" height="112" viewBox="0 0 256 112">
    <path class="path" fill="none" stroke="#000" d="M0.500,64.500 L48.500,64.500 C48.500,64.500 64.500,64.500 64.500,48.500 C64.500,32.500 48.500,32.500 48.500,32.500 L40.500,32.500 C40.500,32.500 24.500,32.500 24.500,16.500 C24.500,0.500 40.500,0.500 40.500,0.500 L88.500,0.500 "/>
    <path class="circle" fill="none" stroke="#000" d="M16.000,8.000 C16.000,8.000 16.000,-0.000 8.000,-0.000 C-0.000,-0.000 -0.000,8.000 -0.000,8.000 C-0.000,8.000 -0.000,16.000 8.000,16.000 C16.000,16.000 16.000,8.000 16.000,8.000 Z" style="position: absolute;"/>
</svg>

var path = anime.path('.path');

anime({
  targets: '.circle',
    translateX: path('x'),
    translateY: path('y'),
  duration: 4000,
  loop: true,
  easing: 'linear'
});

我查看了示例并试图弄清楚为什么会发生这种情况。我已经添加了它正在使用的绝对定位，但它仍然有偏移量，我不确定为什么。我也试过将路径和圆圈分离成单独的 svg，但这似乎也没有用。

任何人都可以向我解释这是为什么以及如何解决它吗？我希望圆圈沿着中心的路径移动。谢谢。

代码笔:RJXabe

Answer 1

问题在于，像这样的运动路径动画通过重新定位圆使其跟随路径来工作。它通过简单地将圆圈移动与特定时间点路径的 X、Y 坐标相对应的量来实现。

但是因为您的圆圈是在 SVG 原点 (0,0)(即左上角)的下方和右侧绘制的，因此它位于路径上应该位于的点的下方和右侧.

有几种解决方案。这里有一对:

<强>1。重新定位(重新绘制)圆，使其以原点为中心

<path class="circle" fill="none" stroke="#000" d="M8.000,0.000
      C8.000,0.000 8.000,-8.000 0.000,-8.000 C-8.000,-8.000 -8.000,0.000 -8.000,0.000 
      C-8.000,0.000 -8.000,8.000 0.000,8.000 C8.000,8.000 8.000,0.000 8.000,0.000 Z"/>

https://codepen.io/PaulLeBeau/pen/eKqKRW

<强>2。重新定位(通过变换)圆，使其以原点为中心

<g class="circle">
  <path ... transform="translate(-8,-8)"/>
</g>

我们需要在这里使用一个组，这样我们添加的 transform 就不会被 anime.js 应用的转换覆盖。

https://codepen.io/PaulLeBeau/pen/eKqKBv