Анимация js анимация работает по-разному при использовании ее на временной шкале - PullRequest
Новая
       81

Анимация js анимация работает по-разному при использовании ее на временной шкале

0 голосов
/ 20 апреля 2020

Вот анимация, которая работает очень хорошо: 

anime({
  targets: '.myAnimation',
  direction: 'reverse',
  easing: 'easeInOutSine', // choose from https://animejs.com/documentation/#pennerFunctions
  loop: true, // let the animation repeat itself 
  keyframes: [
      {clipPath: 'inset(0)' }, // start frame
      {clipPath: 'inset(100px 50px)'}, // end frame
  ],
  duration: 3000
});
body{
  background: red;
}
.myAnimation{
   width: 100px;
   height: 200px;
   background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
  <div class="myAnimation"></div>
</body>

Теперь я хочу использовать точно такую ​​же анимацию на временной шкале, поэтому я попробовал это: 

anime.timeline({
duration: 3000
}).add({
  targets: '.myAnimation',
  direction: 'reverse',
  easing: 'easeInOutSine', // choose from https://animejs.com/documentation/#pennerFunctions
  loop: true, // let the animation repeat itself 
  keyframes: [
      {clipPath: 'inset(0)' }, // start frame
      {clipPath: 'inset(100px 50px)'}, // end frame
  ],
});
body{
  background: red;
}
.myAnimation{
   width: 100px;
   height: 200px;
   background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<body>
  <div class="myAnimation"></div>
</body>

Но это больше не работает, почему? Пожалуйста, помогите мне исправить это.

Большое спасибо заранее

...