Anime.js 轻量的 JavaScript 动画库

• Z时代
• 2024-01-10
• 分类：IT

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的 JavaScript 动画库， 拥有简单而强大的 API。可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。

anime.js 的内置交错系统使复杂的动画和重叠动画变得简单。它可以用于时间和属性，可以动画在多个 CSS 在单个 HTML 元素上同时使用不同的时序转换属性，使用完整的内置回调和控制功能，同步播放，暂停，控制，反向和触发事件。

Anime.js适用于任何网络。CSS，SVG，DOM 属性和 JavaScript 对象：使用单个统一 API 为所有内容设置动画。

使用方法

Anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。

安装 Anime.js

npm install animejs 
bower install animejs

或者下载 anime.js 的文件包

使用方法

在页面中引入 anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

HTML结构

以动画两个div 元素为例，HTML 结构如下：

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>

初始化插件

通过anime() 方法来构造一个对象实例，以json 对象的方式传入需要的参数：

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

配置参数

Anime.js 动画库插件的可用配置参数有：

相关链接

• 官网：https://animejs.com/
• Anime.js 中文文档 https://www.wenjiangs.com/docs/anime-js
• 在线示例

以上是 Anime.js 轻量的 JavaScript 动画库 的全部内容， 来源链接： utcz.com/p/232380.html