Попытка создать анимацию по пути SVG с помощью Anime.js - PullRequest
Новая
       24

Попытка создать анимацию по пути SVG с помощью Anime.js

0 голосов
/ 07 июня 2019

Я пытаюсь сделать базовую анимацию, в которой некоторые шары следуют по траектории круга и останавливаются в разных положениях вдоль него.

Я думал, что смогу использовать ошеломляющую функцию в translateX и 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>

Шары должны равномерно остановиться по кругу

...