将 Clippath CSS 关键帧动画转置为animejs 动画答案

【问题标题】：Transpose Clippath CSS Keyframe animations into animejs animation将 Clippath CSS 关键帧动画转置为animejs 动画
【发布时间】：2020-04-20 00:34:30
【问题描述】：

我的关键帧动画效果很好：

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>

现在我想用animejs重现完全相同的动画，所以我尝试了以下方法：

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>

但它不起作用，我不明白为什么。我哪里错了？请帮忙！

【问题讨论】：

标签： css-animations keyframe clip-path anime.js

【解决方案1】：

在animejs中你必须至少指定两个关键帧（开始和结束帧），否则它将是静态的。

所以，在添加第二个 keyFrame {clipPath: 'inset(100px 50px)'} 之后，我添加了循环和缓动属性以匹配基于 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>

【讨论】：