Question

我刚开始使用svg和anime.js。我正在尝试使用自己的资产重新创建文档中的svg motion path。不过，我不是使用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，但这似乎也不起作用。

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

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

遵循svg运动路径时的偏移量

1 个答案: