как создать неразрывную l oop в аниме. js? - PullRequest
Новая
       88

как создать неразрывную l oop в аниме. js?

0 голосов
/ 06 марта 2020

Чего я пытаюсь достичь:

https://media.giphy.com/media/JTVEzbA0LgON6cnTL6/giphy.gif

Что я до сих пор использую аниме. js: 

// Create a timeline with default parameters
var tl = anime.timeline({
  targets: '.type-stack',
  duration: 750,
  easing: 'easeOutExpo',
  loop: true,
  delay: anime.stagger(1000),
});

tl
.add({
  translateX: [
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
  ],
  translateY: [
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=5px',
    },
    {
      duration: 1000,
      value: '-=0px',
    },
    {
      duration: 1000,
      value: '+=40px',
    },
  ],
  opacity: [
    {
      duration: 1000,
      value: 0,
    },
    {
      duration: 1000,
      value: 0.33,
    },
    {
      duration: 1000,
      value: 0.66,
    },
    {
      duration: 1000,
      value: 1,
    },
    {
      duration: 1000,
      value: 0,
    }
  ],
  // override the easing parameter
  easing: 'spring',
});

JSFiddle для простоты.

Как вы можете видеть, он не ошеломляет, как я хочу, и хотя он зацикливается - он проходит по временной шкале, start -> finish, и я не могу получить тот эффект «бесконечного l oop», которого я пытаюсь достичь.

Если бы кто-нибудь имел опыт с чем-то похожим и мог бы пролить свет на некоторые идеи, он бы быть очень ценным!

...