将 Clippath CSS 关键帧动画转置为anime.js 动画

在进行网站开发的过程中，经常会使用到动画效果来提升用户体验。而 Clippath CSS 关键帧动画是一种比较常见的动画效果，但它的实现过程较为繁琐，因此我们可以使用anime.js库来简化代码的编写。

什么是 Clippath CSS 关键帧动画

Clippath CSS 关键帧动画是指通过clip-path属性来控制元素显示的部分，以此实现动画效果。其中，clip-path的值可以是各种形状，如圆形、多边形等。

如何将 Clippath CSS 关键帧动画转换为 anime.js 动画

1. 安装 anime.js 库

在使用anime.js库之前，我们需要先安装它。可以通过npm进行安装：

npm i animejs

或者通过cdn引入：

<script src="https://cdn.jsdelivr.net/npm/animejs"></script>

2. 编写关键帧动画

在实现关键帧动画之前，我们需要先定义好元素的clip-path属性，以及动画效果需要改变的属性。例如：

.clip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: translateX(0);
}

.clip.active {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 50%);
  transform: translateX(200px) rotate(45deg);
}

上面的代码中，我们定义了一个类名为clip的元素，并设置了clip-path和transform两个属性。我们还为其添加了另一个类名为active，用于表示动画结束后的状态。

3. 将关键帧动画转换成 anime.js 动画

使用anime.js来实现关键帧动画时，我们需要使用anime.timeline()方法来定义动画序列。下面是最终的代码实现：

var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.clip',
  clipPath: [
    { value: 'polygon(0 0, 100% 0, 100% 50%, 0% 50%)' }
  ],
  translateX: [0, 200],
  rotate: 45,
  complete: function() {
    anime({
      targets: '.clip',
      clipPath: [
        { value: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' }
      ],
      duration: 1000,
      easing: 'easeOutExpo'
    });
  }
});

上述代码中，我们定义了一个anime.timeline()方法，并指定了动画的缓动函数和持续时间。在timeline中，我们可以使用add()方法来添加动画序列，其中设置了clipPath、translateX和rotate属性，并在动画结束后添加了一个新的动画，将clip-path属性改回原始状态。

总结

通过这篇介绍，我们了解了 Clippath CSS 关键帧动画的基本概念，并学会了如何使用anime.js库来简化代码。anime.js具有简单易用、兼容性好等优点，可以帮助我们更方便的实现各种动画效果。