Anime.js 轻量的 JavaScript 动画库 - 文章教程

Anime.js 轻量的 JavaScript 动画库

发布于 2020-01-09 字数 3183 浏览 3145 评论 0

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

Anime.js 轻量的 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 动画库插件的可用配置参数有:

参数 默认值 取值
delay 0 number, function (el, index, total)
duration 1000 number, function (el, index, total)
autoplay true boolean
loop false number, boolean
direction ‘normal’ ‘normal’, ‘reverse’, ‘alternate’
easing ‘easeOutElastic’ console log anime.easings to get the complete functions list
elasticity 400 number (higher is stronger)
round false number, boolean
begin undefined function (animation)
update undefined function (animation)
complete undefined function (animation)

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论