Anime.js 简介

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

• HTML、CSS、JavaScript
• 动画基础

安装anime.js：

• 您可以下载anime.min.js 文件并直接使用它。
• 只需谷歌动漫.js CDN，您将获得链接并将其放入您的脚本标签中。

让我们谈谈一些基本的动画。因此，当我们处理它时，我们必须了解很多不同的属性。

• 目标：目标包括对我们想要动画的部分的引用，可以是 HTML 标记、类或 id 元素以及更多我们将在另一篇文章中看到的内容。
• 属性：这些是在处理 CSS、JS、SVG 时可以设置动画的属性。
• 属性参数：这包括属性参数，例如持续时间、延迟、结束延迟、缓动、回合等等。
• 动画参数：这包括动画相关的参数，如方向、循环、自动播放

还有其他的东西，比如关键帧、时间线等。
现在让我们看一个例子来展示使用Anime.js制作动画是多么容易。
示例：我们创建了一个具有一些基本 CSS 的高度、宽度和背景颜色的 div。 JavaScript 部分。首先，我们必须在动画函数中编写所有内容并传递属性对象。目标部分是我们想要动画的地方（这里是它的 div），而translateX是（如果你知道动画，它意味着）从当前位置向 x 轴 150。高度和宽度是我们想要在 x 轴方向 150 处实现的值。在这种情况下，缓动线性意味着字面意思是大小增加和减少。持续时间是动画的时间（以毫秒为单位）。

html

    
        First animation of animejs
        
        
    
    
        
        
        
            let animation = anime({
                targets: "div",
                translateX: 150,
                height: "80px",
                width: "80px",
                duration: 2000,
                easing: "linear",
                direction: "alternate",
                loop: true,
            });
        
    

输出：