目录

• 一、CSS动画库
• • HOVER.CSS
  • Animate.css
  • Magic.css
• 二、JS动画库
• • JQuery.transit
  • AnimeJS（很好用）
  • • 2.1AnimeJS简单使用
    • anime( config : [ Object ])
    • targets
    • direction：交替方式
    • easing：缓冲
    • property parameters（属性参数）
    • properties
    • • Object
    • loop: 持续播放 type:Boolean
    • autoplay：自动播放
    • value特殊写法
    • 细节动画
    • 动画控制（实例API）
    • • 播放/暂停
      • 重新开始
      • 倒退播放
    • 回调函数 & Promise
    • • update：更新时的回调
      • begin & complete：开始和完成的回调函数
      • loopBegin & loopComplete：循环开始和完成的回调函数
      • change：改变时的回调函数
      • changeBegin & changeComplete：改变开始和完成的回调函数
      • finished Promise 完成时的回调函数

一、CSS动画库

HOVER.CSS

链接： http://ianlunn.github.io/Hover/

install： npm install hover.css --save

文档： https://www.npmjs.com/package/hover.css#downloadinstall

Animate.css

链接： https://animate.style/

install： yarn add animate.css

Magic.css

链接： https://www.minimamente.com/project/magic/

install： yarn add magic.css

文档： https://www.npmjs.com/package/magic.css

动画效果： https://www.jq22.com/yanshi2754

二、JS动画库

JQuery.transit

文档： https://animate.style/

install： npm install --save jquery.transit

AnimeJS（很好用）

链接： https://animejs.com/

install： npm install animejs --save

补充文档： https://www.npmjs.com/package/animejs

2.1AnimeJS简单使用

安装：

npm install animejs --save    yarn add animejs

引入：

import animejs from "animejs/lib/anime.es.js"

const anime = require('animejs');

anime( config : [ Object ])

语法

anime({targets:"#target1 .target2",druation:1000,easing:'easeInOutQuad',direction:'alternate'
})

targets

targts 动画目标

targets类型：

CSS选择器、Dom/NodeList、Object、Array[types[]:CSS选择器 || Dom/NodeList || Object]

//选两个特殊的目标类型做个例子
//Object
const lv={value:0,count:0
}
anime({targets:lv,value:100,count:10,round:1,//应该是动画动的时候进行四舍五入update:()=>{//do something}
})
//Array
const nv=['.el', domNode, jsObject]
anime({targets: nv,translateX: 250
});

direction：交替方式

DIRECTION 表示交替方式

参数

• normal： 动画向前播放。当它到达结尾时，它会从第一个关键帧重新开始。
• reverse： 从最后一个关键帧开始，在第一个关键帧结束
• alternate： 动画先向前播放，然后向后播放：

easing：缓冲

easing 表示动画缓冲

可取值：

• linear： linear

• penner函数

var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();
var easingNames = ['easeInQuad','easeInCubic','easeInQuart','easeInQuint','easeInSine','easeInExpo','easeInCirc','easeInBack','easeOutQuad','easeOutCubic','easeOutQuart','easeOutQuint','easeOutSine','easeOutExpo','easeOutCirc','easeOutBack','easeInBounce','easeInOutQuad','easeInOutCubic','easeInOutQuart','easeInOutQuint','easeInOutSine','easeInOutExpo','easeInOutCirc','easeInOutBack','easeInOutBounce','easeOutBounce','easeOutInQuad','easeOutInCubic','easeOutInQuart','easeOutInQuint','easeOutInSine','easeOutInExpo','easeOutInCirc','easeOutInBack','easeOutInBounce',
]function createEasingDemo(easing) {var demoEl = document.createElement('div');demoEl.classList.add('el', 'square', 'stretched', 'easing-'+easing);anime({targets: demoEl,translateY: [50, -50],direction: 'alternate',loop: true,delay: 100,endDelay: 100,duration: 1000,easing: easing});fragment.appendChild(demoEl);
}easingNames.forEach(function(easeName) {createEasingDemo(easeName);
});demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);

了解其他值可以访问这里，

property parameters（属性参数）

• duration： 持续时间 type： Number

• delay： 延迟 type： Number || Object

• endDelay： 最后延迟 type： Number || Object

• round： 将动画值舍入为1位小数 type： Number

properties

样式变化

CSS样式：大多数CSS都可以做动画

Transforms：

Object

当目标值是Object时，他的变化主要是由属性自身引起的

properties Type：String||Object||function

如果值是func的话，他的参数将是下面这几个

anime({targets: '.function-based-params-demo .el',translateX: 270,direction: 'alternate',loop: true,delay: function(el, i, l) {return i * 100;},endDelay: function(el, i, l) {return (l - i) * 100;}
});

loop: 持续播放 type:Boolean

autoplay：自动播放

value特殊写法

1、计算

anime({targets: '.el.relative-values',translateX: {value: '*=2.5', // 100px * 2.5 = '250px'duration: 1000},width: {value: '-=20px', // 28 - 20 = '8px'duration: 1800,easing: 'easeInOutSine'},rotate: {value: '+=2turn', // 0 + 2 = '2turn'duration: 1800,easing: 'easeInOutSine'},direction: 'alternate'
});

2、范围：最终会在100到250之间移动

anime({targets: '.el.from-to-values',translateX: [100, 250], // from 100 to 250delay: 500,direction: 'alternate',loop: true
});

3、添加动画方式

var colorsExamples = anime.timeline({endDelay: 1000,easing: 'easeInOutQuad',direction: 'alternate',loop: true
})
.add({ targets: '.color-hex',  background: '#FFF' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(255,255,255)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, .2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, .2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);

细节动画

anime({targets: '.property-keyframes-demo .el',translateX: [{ value: 250, duration: 1000, delay: 500 },{ value: 0, duration: 1000, delay: 500 }],translateY: [{ value: -40, duration: 500 },{ value: 40, duration: 500, delay: 1000 },{ value: 0, duration: 500, delay: 1000 }],scaleX: [{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },{ value: 1, duration: 900 },{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },{ value: 1, duration: 900 }],scaleY: [{ value: [1.75, 1], duration: 500 },{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },{ value: 1, duration: 450 },{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },{ value: 1, duration: 450 }],easing: 'easeOutElastic(1, .8)',loop: true
});

动画控制（实例API）

播放/暂停

var animation = anime({});
//播放
animation.play()
//暂停
animation.pause()

重新开始

var animation = anime({});
//重新开始
animation.restart()

倒退播放

var animation = anime({});
//倒退播放
animation.reverse()

回调函数 & Promise

update：更新时的回调

var updates = 0;anime({targets: '.update-demo .el',translateX: 270,delay: 1000,direction: 'alternate',loop: 3,easing: 'easeInOutCirc',update: function(anim) {updates++;progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';updateLogEl.value = 'updates : '+updates;}
});

begin & complete：开始和完成的回调函数

anime({targets: '.begin-complete-demo .el',translateX: 240,delay: 1000,easing: 'easeInOutCirc',update: function(anim) {progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';beginLogEl.value = 'began : ' + anim.began;completeLogEl.value = 'completed : ' + anim.completed;},begin: function(anim) {beginLogEl.value = 'began : ' + anim.began;},complete: function(anim) {completeLogEl.value = 'completed : ' + anim.completed;}
});

loopBegin & loopComplete：循环开始和完成的回调函数

var loopBegan = 0;
var loopCompleted = 0;anime({targets: '.loopBegin-loopComplete-demo .el',translateX: 240,loop: true,direction: 'alternate',easing: 'easeInOutCirc',loopBegin: function(anim) {loopBegan++;beginLogEl.value = 'loop began : ' + loopBegan;},loopComplete: function(anim) {loopCompleted++;completeLogEl.value = 'loop completed : ' + loopCompleted;}
});

change：改变时的回调函数

var changes = 0;anime({targets: '.change-demo .el',translateX: 270,delay: 1000,endDelay: 1000,direction: 'alternate',loop: true,easing: 'easeInOutCirc',update: function(anim) {progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';},change: function() {changes++;changeLogEl.value = 'changes : ' + changes;}
});

changeBegin & changeComplete：改变开始和完成的回调函数

var changeBegan = 0;
var changeCompleted = 0;anime({targets: '.changeBegin-chnageComplete-demo .el',translateX: 240,delay: 1000,endDelay: 1000,loop: true,direction: 'alternate',easing: 'easeInOutCirc',update: function(anim) {progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';},changeBegin: function(anim) {changeBegan++;beginLogEl.value = 'change began : ' + changeBegan;},changeComplete: function(anim) {changeCompleted++;completeLogEl.value = 'change completed : ' + changeCompleted;}
});

finished Promise 完成时的回调函数

var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;function logFinished() {anime.set(finishedLogEl, {value: 'Promise resolved'});anime.set(promiseEl, {backgroundColor: '#18FF92'});
}var animation = anime.timeline({targets: promiseEl,delay: 400,duration: 500,endDelay: 400,easing: 'easeInOutSine',update: function(anim) {progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';}
}).add({translateX: 250
}).add({scale: 2
}).add({translateX: 0
});animation.finished.then(logFinished);