Anime.js - элементы анимации с различной продолжительностью

Question

Имеется html-элемент, который нужно бесконечно вращать, но передвинуть только 1 раз. Пытаюсь сделать с помощью вызова anime.js 2 раза.

В таком варианте не работает смещение, но работает вращение.

anime({
  targets: '.element',
  translateX: [200,0],
  translateY: [100,0],
  opacity: [0,1],
  delay: 3500,
  duration: 1200,
  easing: 'easeOutQuad'
});
anime({
  targets: '.element',
  rotate: '1turn',
  duration: 4000,
  loop: true,
  easing: 'linear'
});

Если вызовы поменять местами, то в целом работает, но идет перескакивание во вращении после смещения.

----------UPDATE----------

Действительно, если поменять местами вызовы и сложить delay + duration = duration: 4700, то не всё работает и не происходит перескока в анимации, но почему именно этот вариант работает, а первый нет, совершенно непонятно.

anime({
  targets: '.element',
  rotate: '1turn',
  duration: 4700,
  loop: true,
  easing: 'linear'
});
anime({
  targets: '.element',
  translateX: [200,0],
  translateY: [100,0],
  opacity: [0,1],
  delay: 3500,
  duration: 1200,
  easing: 'easeOutQuad'
});

Answer 1

Для запуска анимаций друг за другом в фреймворке animejs используется: Timeline

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

Создание Timeline

const timeline = anime.timeline({
   autoplay: true,
  loop:true,
  easing: 'easeInOutSine',
});

Далее с помощью метода .add добавляются анимации вращения и перемещения объекта:

const timeline = anime.timeline({
   autoplay: true,
  loop:true,
  easing: 'easeInOutSine',
});

timeline.add({
  targets: '.element',
  rotate: '3turn',
  easing: 'linear',
  duration: 2000,
  
})
.add({
  targets: '.element',
  translateX: [0, 200],
  translateY: [0, 200],
   opacity:[1,0.2],
   duration: 2000,
});

.element {
width:50px;
height:50px;
background-color:yellowgreen;
margin:4em;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div class="element"></div>

Вариант с возвратом объекта и зацикливанием

const timeline = anime.timeline({
   autoplay: true,
  loop:true,
  easing: 'easeInOutSine',
});

timeline.add({
  targets: '.element',
  rotate: '3turn',
  easing: 'linear',
  duration: 3000,
  
})
.add({
  targets: '.element',
  translateX: [0, 200, 0],
  translateY: [0, 200, 0],
   opacity:[1,0.2,1],
   duration: 2000,
});

.element {
width:50px;
height:50px;
background-color:yellowgreen;
margin:4em;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div class="element"></div>

БЛОГ НА HUSL

Anime.js - элементы анимации с различной продолжительностью

Ответы (1 шт):