морфинг с anime.js: координаты переходят где-то еще между заданной начальной и конечной позицией - PullRequest
Новая
       19

морфинг с anime.js: координаты переходят где-то еще между заданной начальной и конечной позицией

0 голосов
/ 24 марта 2019

У меня есть два svg треугольника, и я пытаюсь изменить их с помощью anime.js.Проблема, которая у меня есть, заключается в том, что между заданными начальными и конечными координатами графика полностью перемещается куда-то еще, и я не знаю почему.

Это начальная позиция:

enter image description here

Это конечная позиция:

enter image description here

И вот куда переходят координаты без объяснения причин:

enter image description here

Вот мой пример кода.Вы можете запустить его, нажав кнопку.

https://codepen.io/saitam1/pen/draKLb

1 Ответ

2 голосов
/ 24 марта 2019

Проблема исходит от ваших путей.

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

Изменение с m на M исправляет прыжок треугольника, но вам нужно найти другой путь, чтобы фактически добраться до желаемой конечной позиции. 

function doFunction() {

  var paths = [
    // here changed M to m
    {id: '#path309', d: 'm 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 Z'}, 
    {id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
  ];

  var timeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: false });

  paths.forEach(function(path, index) {
    timeline
      .add({
        targets: path.id,
        d: {
          value: path.d,
          duration: 1000,
          easing: 'easeInOutQuad'
        },
        offset: 1000 + 10 * index
      });
  });

}
svg {
  display: block;
  margin: 0 auto;
}

path {
  fill: none;
  stroke: black;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />  

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 200 200">
      
  <path d="m 110.51595,80.797791 26.28083,12.271789 2.96257,10.935445 z" id="path309" />
  <path d="m 70.51595,80.797791 -5.00762,25.058566 11.28845,-2.786777 z" id="path311" />
      
</svg>
...