Question

我正在尝试做一个基本的动画，其中一些球沿着圆弧路径停在沿它的不同位置。

我以为我可以在transformX和translateY上使用交错功能，但这似乎不起作用。

   <style>
    .wrapper{ 
      position: absolute;
      width: 300px;
      height: 300px;
      left: 4vw;
      top: 4vh;
    }

    .ball{
      position: absolute;
      left: 0px;
      bottom: 0px;
      margin: 0px auto;
      height: 15px;
      width: 15px;
      border-radius: 100%;
      top: -9px;
      left: -11px;
      background-color: red;
    }
</style>

<div class="wrapper">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>

  <svg viewBox="0 0 300 300">
    <path fill="#FFFFFF" stroke="#211915" stroke-miterlimit="10" d="M150,0c76,0,150,62.5,150,150s-70.1,150-150,150S0,232.9,0,150
S65.6,0,150,0z"/>
  </svg>
</div>

<script src="anime.min.js"></script>

<script>
    var path = anime.path('svg path');

    anime({
        targets: '.ball',
        translateY: anime.stagger(path('x')), // this doesn't work
        // translateX: path('x'), --------> this is the real way to make the ball to follow path.
        translateY: anime.stagger(path('x')), // this doesn't work
        // translateY: path('y'), --------> this is the real way to make the ball to follow path.
        rotate: path('angle'),
        delay: anime.stagger(200),
        easing: 'easeInOutSine',
    })
</script>

这些球应该在圆周上等距停止

尝试使用Anime.js沿SVG路径错开动画

0 个答案: