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

 

 

 

 

 

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