anime

anime 介绍

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

安装anime.js

npm install animejsbower 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

number,function (el,index,total)

duration

1000

number,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)

网站地址:https://animejs.com/

网站描述:一个轻量的JavaScript 动画库

anime

官方网站：https://animejs.com/