Question

我想制作<clipPath>形状的动画以沿相同数量的<path>移动。每种形状（圆形），一条路径。然后通过CSS <img>属性将动画剪贴蒙版应用于位图图像clip-path。

除了clipPath相对于图像（由于preserveAspectRatio="none"用于运动路径的路径可以缩放）之外，它不能适当缩放，因为它可以很好地用作静态对象，因此可以很好地工作。因此，我使用了clipPathUnits="objectBoundingBox"来解决了这个问题。看起来clipPath形状超出了位图图像的视图框。

这是我使用的基本代码段（请参见下面的Codepen链接）：

<svg class="clipping-mask" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 20"  preserveAspectRatio="none">
  <clipPath id="svg-clip">
    <ellipse class="target target-1" cx="0" cy="0" rx="20" ry="20"></ellipse>
    <ellipse class="target target-2" cx="0" cy="0" rx="20" ry="20"></ellipse>
  </clipPath>
</svg>

<svg class="motion-path" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 20" preserveAspectRatio="none">
  <path class="path path-1" d="M0 19.7C12 11.5 13.2 3.8 13.2 3.8"></path>
  <path class="path path-2" d="M14.9 0c3.6-.5 20 9.4 21 12.7"></path>
</svg>

<img src="https://live.staticflickr.com/4556/27006062359_7b1a84ac23_b.jpg">

img {
  clip-path: url(#svg-clip);
}

const $paths = document.querySelectorAll('.path');

$paths.forEach(($path, index) => {
  const path = anime.path(`.path-${index + 1}`);

  anime({
    targets: `.target-${index + 1}`,
    translateX: path('x'),
    translateY: path('y'),
    direction: 'alternate',
    delay: 100 * index,
    duration: 2000,
    easing: 'easeInOutCubic',
    loop: true,
  });
});

这是Codepens：

我尝试了不同的组合，但没有提出正确的解决方案。现在感觉有点迷路。也许有人可以帮我吗？它不必是anime.js，但其他库也可以。

通过Anime.js使用运动路径对SVG clipPath形状进行动画处理

0 个答案: