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

动漫.js 是一个小型、轻量级的 JavaScript 库，具有简单而强大的 API。它适用于 DOM 元素、CSS 和 JavaScript 对象。

我们使用一个库来使我们的工作简单易行。库是包含许多函数的 JavaScript 文档，这些函数为您的网页实现了一些有用的任务。

CDN链接：

示例：在简单的 CSS 中，如果我们想要为任何对象设置动画，我们必须向该 HTML 标签或类或 id 添加动画属性。我们可以使用简单的 CSS 来实现动画。

HTML

  
    
    
    
    
        /* Adding basic CSS */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: rgb(29, 29, 29);
        flex-wrap: wrap;
      }
  
      .container {
        flex-direction: row;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .circle {
        width: 60px;
        height: 60px;
        background: crimson;
        border-radius: 50%;
        margin: 1rem;
        clip-path: circle(100%);
        animation: animation 1.5s forwards infinite;
      }
  
      @keyframes animation {
        100% {
          clip-path: circle(0);
        }
      }
    
  
  
    
      
    
  

  

输出：

要将 Clippath CSS关键帧动画转换为anime.js动画，我们将遵循以下方法。

方法：首先，我们将从 CSS 文件中删除关键帧和动画。现在我们将编写我们的 JavaScript。

在anime.js 中，我们必须指定起始帧和结束帧是什么，因为如果我们只添加一帧，它将保持静止并且不会发生动画。

• 我们的起始框架是

  clip-path: circle(100%);

• 我们的结束帧是

  clip-path:circle(0);

因此，使用anime.js实现上述动画非常简单，只需要几行代码。

JavaScript：下面演示了代码的 JavaScript 部分。

Javascript

anime({
  targets: ".circle",
  easing: "easeInOutExpo", 
  keyframes: [
    { clipPath: "circle(100%)" }, 
    { clipPath: "circle(0)" },
  ],
  direction: "alternate", 
  duration: 1500, 
  loop: true 
});
   

完整的解决方案：我们选择我们的目标，所以我们选择我们的圆 div标签。在第二行，我们宣布我们的动议。我们将使用easyInOutExpo移动它，这将使我们的动画流畅。然后，我们声明我们的关键帧，其中第一行将是起始帧，第二行将包含结束帧。

我们将声明它的动画方向，如reverse、forward或alternate 。然后我们将给出动画发生的持续时间。最后一行包括我们是要通过为循环赋予真值来无限次制作动画还是通过赋予值false仅一次。

HTML

  
    
    
    
      
        /* Adding basic CSS */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: rgb(29, 29, 29);
        flex-wrap: wrap;
      }
  
      .container {
        flex-direction: row;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .circle {
        width: 60px;
        height: 60px;
        background: crimson;
        border-radius: 50%;
        margin: 1rem;
        clip-path: circle(100%);
        animation: animation 1.5s forwards infinite;
      }
  
      @keyframes animation {
        100% {
          clip-path: circle(0);
        }
      }
    
  
  
    
      
    
    
      anime({
            
        // Selecting our target
        targets: ".circle", 
          
        // Adding easing attribute for smooth animation
        easing: "easeInOutExpo", 
        keyframes: [ //Frame start and End
          { clipPath: "circle(100%)" },
          { clipPath: "circle(0)" }, 
        ],
        direction: "alternate", 
        duration: 1500, 
        loop: true, 
      });
    
  

输出：通过这种方式，我们可以将 Clippath CSS Keyframe 动画转换为anime.js 动画。