anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。

实际演示和代码，官网写得很详细清楚了，这里记录一下一些常用的东西方便翻看，不作具体演示了。

用法：

1，官网下载anime.js文件，直接引入

2，npm install animejs 进行安装，然后在自己的项目JS中引入

开始：

var example = anime({

  targets: el,              //要进行动画的目标

  translateX: 250      //要进行动画的属性

});

参数:

targets: 要进行动画的目标
CSS SELECTOR（css选择器）	DOM NODE（dom节点）
NODE LIST（节点数组）	JAVASCRIPT OBJECT（js对象）
JAVASCRIPT ARRAY(js数组)

要进行动画的属性
各种css属性 (left,top,color,background...)	css3的变形属性（translate,scale,rotate...）
js对象的数值	dom的各种属性（input的value值，img的widht,height...）
SVG的各种属性

上面就是一个anime动画最基本的参数,有这两个就能动起来，其它还有一些参数，往下看：

参数	值	默认
duratiom:动画时间	number	1000
delay:延迟时间	number	0
easing:动画的速度曲线，缓动	特定的字符串 (控制台日志anime.easings可以获得完整的功能列表)	'easeOutElastic'
direction:方向	'normal'（正常）、'reverse'(反方向)、alternate'（回放）	'normal'
loop:循环	number（次数）、boolean（为true时代表无限循环）	false
elasticity:弹性	number(越高越强)	400
autoplay:自动播放	boolean	true
round	number（不知道有没其他作用，暂时知道的是，可以作为数值的间隔值，就是从1递增到100的动画，设为1的话就是每次以1递增，2就是以2递增，不设的话会保留很多位小数）	0?

有多个动画属性时，也可以各自设置参数:

var specificPropertyParameters = anime({

  targets: '#specificPropertyParameters .el',

  translateX: {

    value: 250,

    duration: 800

  },

  rotate: {

    value: 360,

    duration: 1800,

    easing: 'easeInOutSine'

  },

  scale: {

    value: 2,

    duration: 1600,

    delay: 800,

    easing: 'easeInOutQuart'

  },

  delay: 250 // All properties except 'scale' inherit 250ms delay

});

　API：

时间线：timeline

可以连接多个动画，完结一个动画之后接着进行下一个动画

offset:时间间隔

number

var basicTimeline = anime.timeline();    //基本的时间线,新建后通过add增加动画

basicTimeline

  .add({

    targets: '#basicTimeline .square.el',

    translateX: 250,

    easing: 'easeOutExpo'

  })

  .add({

    targets: '#basicTimeline .circle.el',

    translateX: 250,

    easing: 'easeOutExpo'

  })

  .add({

    targets: '#basicTimeline .triangle.el',

    translateX: 250,

    easing: 'easeOutExpo'

  });

var timelineParameters = anime.timeline({        //可以在新建的时候把多个动画通用的参数抽离出来，add里写动画的属性

  direction: 'alternate',

  loop: true

});

timelineParameters

  .add({

    targets: '#timelineParameters .square.el',

    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],

    translateY: [ { value: 30 }, { value: 60 }, { value: 60 } ],

    duration: 3000

  })

  .add({

    targets: '#timelineParameters .circle.el',

    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],

    translateY: [ { value: 30 }, { value: -30 }, { value: -30 } ],

    duration: 3000,

    offset: 200

  })

  .add({

    targets: '#timelineParameters .triangle.el',

    translateX: [ { value: 80 }, { value: 250 } ],

    translateY: [ { value: -60 }, { value: -30 }, { value: -30 } ],

    duration: 3000,

    offset: 400

  });

var TLParamsInheritance = anime.timeline({             //参数继承,再同一个目标上建立时间线，链接多段动画

  targets: '#TLParamsInheritance .el',

  delay: function(el, i) { return i * 200 },

  duration: 500,

  easing: 'easeOutExpo',

  direction: 'alternate',

  loop: true

});

TLParamsInheritance

  .add({

    translateX: 250,

  })

  .add({

    opacity: .5,

    translateX: 250,

    scale: 2,

  })

  .add({

    translateX: 0,

    scale: 1

  });

**动画状态**
play()	播放动画
pause()	暂停动画
restart()	重新开始动画
reverse()	反向播放动画
seek()	在指定时间播放或暂停，要传入时间作为参数

P.S.时间线也是可以进行暂停、播放的

回调函数
begin: function(anim) {}	动画开始时
update: function(anim) {}	数值更新时
run: function(anim) {}	动画进行时（跟update差不多，但有些动画有缓动，虽然数值已经更新完了，但动画还是在进行中的）
complete: function(anim) {}	动画结束时

P.S anim 这个参数返回的是当前动画的实例，里面的值根据具体场景使用，

例如：

anim.progress 表示动画的进度

anim.began 判断动画是否已经开始

anim.completed 判断动画是否已经结束

promise

var finishedLogEl = document.querySelector('#finishedPromise .finished-log');

var finishedPromise = anime({

  targets: '#promises .el',

  translateX: 250,

  delay: 1000

});

var promise = finishedPromise.finished.then(logFinished);

function logFinished() {

  finishedLogEl.value = 'Promise resolved';

  // Rebind the promise, since this demo can be looped.

  setTimeout(function() {

    promise = finishedPromise.finished.then(logFinished);

  });

}

finishedPromise.update = function(anim) {

  if (!anim.completed) {

    finishedLogEl.value = '';

  }

}

还有一些关于SVG的用法，不太懂就不看了。

使用过程中的一些注意点补充：

1，动画属性的值可以接受特殊单位：

例如：left : 200 , left:‘2rem’（一般不准） , left:function(){ return 200 } , left: ‘+=1’ ...

动画属性的值可以以数组传入：

 backgroundColor: [                     //在一段动画之中背景颜色变化了3次

    {value: '#FFF'}, // Or #FFFFFF

    {value: 'rgb(255, 0, 0)'},

    {value: 'hsl(100, 60%, 60%)'}

  ]

2，这个值得注意一下了，进行动画的目标元素尽量不要设置transition 属性，会对anime动画有影响。

好吧，开始做点炫酷的动画吧！

巴特西

anime.js 学习笔记

CSS SELECTOR（css选择器）

DOM NODE（dom节点）

NODE LIST（节点数组）

JAVASCRIPT OBJECT（js对象）

JAVASCRIPT ARRAY(js数组)

各种css属性 (left,top,color,background...)

css3的变形属性（translate,scale,rotate...）

js对象的数值

dom的各种属性（input的value值，img的widht,height...）

SVG的各种属性

duratiom:动画时间

delay:延迟时间

easing:动画的速度曲线，缓动

direction:方向

loop:循环

elasticity:弹性

autoplay:自动播放

round

offset:时间间隔

number

play()

pause()

restart()

reverse()

seek()

begin: function(anim) {}

update: function(anim) {}

run: function(anim) {}

complete: function(anim) {}

promise

2，这个值得注意一下了，进行动画的目标元素尽量不要设置transition 属性，会对anime动画有影响。

最新文章

热门文章