Anime.js动画库用法

Anime.js 是一个轻量级的 JavaScript 动画库，用于在网页上创建各种动画效果。它提供了丰富的功能，可以控制元素的属性，从而实现各种复杂的动画效果，包括平移、旋转、缩放、透明度等。

Anime.js官网：https://animejs.com/

可以看到Anime.js的官网有一段很炫酷的动画。

以下是 Anime.js 的基本用法：

安装 Anime.js

你可以通过在 HTML 文件中添加以下链接引用来直接使用 Anime.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

或者，你也可以通过 npm 进行安装：

npm install animejs

import anime from 'animejs';

创建一个基本动画

// 选择要进行动画的元素
const element = document.querySelector('.my-element');

// 定义动画参数
const animation = anime({
  targets: element,
  translateX: 250, // 在 X 轴上移动 250 像素
  rotate: '1turn', // 旋转一圈
  duration: 2000, // 动画持续时间为 2 秒
  loop: true, // 无限循环
});

上述代码将选择一个类名为 .my-element 的元素，并在 X 轴上将其平移 250 像素，然后旋转一圈，动画持续 2 秒，而且无限循环。

动画控制

你可以在运行时控制动画的各个方面，比如暂停、播放、取消等：

// 暂停动画
animation.pause();

// 播放动画
animation.play();

// 取消动画
animation.cancel();

更复杂的动画

Anime.js 提供了许多属性和选项，你可以使用它们来创建各种复杂的动画效果，比如缓动函数、关键帧动画等。

anime({
  targets: '.my-element',
  translateX: 250,
  easing: 'easeInOutQuad', // 使用缓动函数
  opacity: 0.5,
  duration: 1000,
  loop: true,
  direction: 'alternate', // 在反向方向上播放动画
  keyframes: [
    { translateY: -40 },
    { translateY: 40 },
    { translateY: 0 }
  ],
});

上述代码将元素进行 X 轴移动，同时在动画过程中进行透明度变化，并使用缓动函数来平滑动画。

这只是 Anime.js 的基本用法示例。它提供了许多其他选项和功能，可以帮助你实现更复杂、更炫酷的动画效果。你可以参考 Anime.js 的官方文档来了解更多详细信息和示例代码。