安装anime.js

Aanime.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>


结构

以动画两个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 动画库插件的可用配置参数有:

参数默认值取值
delay0number, function (el, index, total)
duration1000number, function (el, index, total)
autoplaytrueboolean
loopfalsenumber, boolean
direction'normal''normal', 'reverse', 'alternate'
easing'easeoutElastic'console log anime.easings to get the complete functions list
elasticity400number (higher is stronger)
roundfalsenumber, boolean
beginundefinedfunction (animation)
updateundefinedfunction (animation)
completeundefinedfunction (animation)

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!