anime.js 学习笔记

官网演示/文档

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动画有影响。

 

 

 

 

 

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