animejs走马灯_anime.js 简单入门教程

anime.js是一个强大的用来制作动画的javascript库，虽然功能没有GASP(greensock)强大，但胜在它足够轻便，gzip压缩完只有9kb左右，麻雀虽小，却五脏俱全。

下面就来看看如何使用anime.js来编写动画效果。

先在github下载好anime.js，然后在页面引入它。

弹球效果

引入anime.js后，就可以开始来编写动画效果。

首先来编写一个弹球的动画效果，先来使用anime.js提供的方法来编写好基本的结构：

var bouncingBall =anime({//code here

});

然后在里面使用anime.js提供的对应的方法来实现动画效果，比如要操纵的dom元素，动画的时间以及缓动曲线等等。

var bouncingBall =anime({

targets:'.ball',

translateY:'50vh',

duration:300,

loop:true,

direction:'alternate',

easing:'easeInCubic'});

下面来一一解释下各个属性的含义。

targets属性是用来指定要运动的元素，可以使用类似CSS选择器来选择元素，或者是下面几种方法来选择元素：

DOM选择方法document.querySelector('.ball')或者是document.querySelectorAll('.ball')方法;

js数组的方式['.ball']