Транспонировать анимацию ключевых кадров Clippath CSS в аниме js анимацию - PullRequest
Новая
       95

Транспонировать анимацию ключевых кадров Clippath CSS в аниме js анимацию

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

У меня есть анимация ключевого кадра, которая работает очень хорошо: 

body{
  background: red;
}
.myAnimation{
   width: 100px;
   height: 200px;
   background: blue;
   clip-path: inset(100px 50px);
   animation: myClipAnim 3s infinite;
   transition: animation 2s;
}

@keyframes myClipAnim {
    100% { clip-path: inset(0) }
}
<body>
  <div class="myAnimation"></div>
</body>

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

anime({
  targets: '.myAnimation',
  direction: 'reverse',
  keyframes: [
      {clipPath: 'inset(0)' }
  ],
  duration: 3000
});
body{
  background: red;
}
.myAnimation{
   width: 100px;
   height: 200px;
   background: blue;
   clip-path: inset(100px 50px);
}
<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>

Но это не работает, я не понимаю почему. Где я не прав? Пожалуйста, помогите!

1 Ответ

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

В аниме js необходимо указать как минимум два ключевых кадра (начальный и конечный кадры), в противном случае это будет stati c.

Итак, после добавления второго ключевого кадра {clipPath: 'inset(100px 50px)'}, я добавлены атрибуты l oop и easing для соответствия вашему примеру на основе CSS. 

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>
...