版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_23876873/article/details/83212952
目录
Animatable properties/可以被动画的属性
Individual CSS transforms/transform的使用
官网文档
https://github.com/juliangarnier/anime/blob/master/README.md
http://animejs.com/documentation
兼容性
安装
$ npm install animejs
# OR
$ bower install animejs引入
1.es6中引入
import anime from 'animejs'2浏览器中引入
<script src="anime.min.js"></script>简单使用
anime({
targets: 'div',
translateX: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});targe:目标对象，1.html的id或者class、tag标签，2.普通的javascript对象。3.dom对象
loop:动画循环播放
duration:动画时长
其他属性为target对象中存在的属性
Targets/目标对象
| CSS Selectors | 'div', '.item', 'path', '#el path' |
css选择器 |
| DOM Element | document.querySelector('.item') | 获取到的dom对象 |
| NodeList | document.querySelectorAll('.item') | 多个dom对象 |
| Object | {prop1: 100, prop2: 200} | 普通javascript对象 |
| Array | ['div', '.item', domNode] | 数组对象 |
案例：http://animejs.com/documentation/#cssSelector
Animatable properties/可以被动画的属性
| Types | Examples | |
| CSS | opacity, backgroundColor, fontSize ... |
css中的样式 |
| Transforms | translateX, rotate, scale ... |
css3中的transform |
| Object properties | Any Object property containing numerical values |
任意的js对象中包含数值的属性 |
| DOM attributes | Any DOM attributes containing numerical values | 任意的dom对象中包含数值的属性 |
| SVG attributes | Any SVG attributes containing numerical values | 任意的SVG对象中包含数值的属性 |
CSS
Any CSS properties can be animated:
anime({
targets: 'div',
left: '80%', // Animate all divs left position to 80%
opacity: .8, // Animate all divs opacity to .8
backgroundColor: '#FFF' // Animate all divs background color to #FFF
});案例：http://animejs.com/documentation/#cssProperties
Individual CSS transforms/transform的使用
anime({
targets: 'div',
translateX: 250, // Animate all divs translateX property to 250px
scale: 2, // Animate all divs scale to 2
rotate: '1turn' // Animate all divs rotation to 1 turn
});http://animejs.com/documentation/#CSStransforms
JavaScript Object properties/js对象
任意对象数值属性可被animated
var myObject = {
prop1: 0,
prop2: '0%'
}
anime({
targets: myObject,
prop1: 50, // Animate the 'prop1' property from myObject to 50
prop2: '100%' // Animate the 'prop2' property from myObject to 100%
});DOM Attributes
任意DOM对象属性可被animated
<input value="0">
anime({
targets: input,
value: 1000, // Animate the input value to 1000
round: 1 // Remove decimals by rounding the value
});SVG Attributes
任意SVG对象属性可被animated
<svg width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
</svg>anime({
targets: 'polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});Property parameters/anime自有属性参数
为每个动画属性定义的时长、延迟、easing，可以全局设置，也可以单独设置。
注意：没有单独定义的属性，则继承全局属性值
| Names | Defaults默认值 | Types类型 | Info | |
| duration | 1000 | number, function |
millisecond | 时长、毫秒 |
| delay | 0 | number, function |
millisecond | 延迟、毫秒 |
| easing | 'easeOutElastic' | function | See Easing functions | 动画的线性的控制函数 |
| elasticity | 500 | number, function |
Range [0 - 1000] | 弹力 |
| round | false | number, boolean, function |
Power of 10 |
anime({
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
});Function based property parameters/基于属性参数的函数
函数参数分别为：target，index，targetsLength
anime({
targets: 'div',
translateX: 250,
rotate: 180,
duration: function(target) {
// Duration based on every div 'data-duration' attribute
return target.getAttribute('data-duration');
},
delay: function(target, index) {
// 100ms delay multiplied by every div index, in ascending order
return index * 100;
},
elasticity: function(target, index, totalTargets) {
// Elasticity multiplied by every div index, in descending order
return 200 + ((totalTargets - index) * 200);
}
});Animation parameters/动画参数
| name | 默认参数 | 类型types | |
| loop | false | number, boolean |
循环：次数、true一直循环、false不循环 |
| direction | 'normal' | 'normal', 'reverse', 'alternate' |
方向：正常、翻转、交替 |
| autoplay | true | boolean | 自动播放 |
anime({
targets: 'div',
translateX: 100,
duration: 2000,
loop: 3, // Play the animation 3 times
direction: 'reverse', // Play the animation in reverse
autoplay: false // Animation paused by default
});Property values
Single value
| Number | 100 | 自动加上默认或者原有数值的单位 | |
| String | '10em', '1turn', 'M21 1v160', '50%' |
字符内至少包含一个数值 | |
| Relative values | '+=100px', '-=20em', '*=4' |
加减乘，在原来数值基础上 | |
| Colors | '#FFF', 'rgb(255,0,0)', 'hsl(100, 20%, 80%)' |
Accepts 3 or 6 hex digit, rgb, or hsl values |
anime({
targets: 'div',
translateX: 100, // Add 'px' by default (from 0px to 100px)
rotate: '1turn', // Use 'turn' as unit (from 0turn to 1turn)
scale: '*=2', // Multiply the current scale value by 2 (from 1 to (1 * 2))
backgroundColor: '#FFF', // Animate the background color to #FFF (from 'rgb(0,0,0)' to 'rgb(255,255,255)')
duration: 1500
});From > To values
强制从一个设置的值开始动画。
使用数组,[ 100 , 0 ]，表示从100开始执行，0位结束
anime({
targets: 'div',
translateX: [100, 200], // Translate X from 100 to 200
rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
scale: ['*=2', 1], // Scale from 2 times the original value to 1,
backgroundColor: ['rgb(255,0,0)', '#FFF'], // Will transition the background color from red to white
duration: 1500
});Function based values
用法跟function based property parameters相同，
函数可以获取每个目标对象动画的属性，函数接收3个参数：target、index、targetsLength
anime({
targets: 'div',
translateX: function(el) {
return el.getAttribute('data-x');
},
translateY: function(el, i) {
return 50 + (-50 * i);
},
scale: function(el, i, l) {
return (l - i) + .25;
},
rotate: function() { return anime.random(-360, 360); },
duration: function() { return anime.random(800, 1600); },
delay: function() { return anime.random(0, 1000); }
});Keyframes/关键帧
Keyframes被定义为 在数组中为Object对象
每个实例对象（instance）的 duration 被分割，根据每个属性中的帧的数目。
anime({
targets: 'div',
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },//--0.5-1.5---> x方向移动250
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }//----2-3--->从250到0
],
translateY: [
{ value: -40, duration: 500, elasticity: 100 },//-0-0.5-->上移-40
{ value: 40, duration: 500, delay: 1000, elasticity: 100 },//--1.5-2.0--->下移动-40到40
{ value: 0, duration: 500, delay: 1000, elasticity: 100 }//------3-3.5----->上移动40到0
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },//0.5-0.6--->x方向放大4倍
{ value: 1, duration: 900, elasticity: 300 },//---0.6-1.5--------->4倍缩小到1
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },//--2.0-2.1--->放大4倍
{ value: 1, duration: 900, elasticity: 300 }//-----2.1-3------->缩小到1
],
scaleY: [
{ value: [1.75, 1], duration: 500 },//------>0-0.5 y方向从1.75向1缩小
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },//-1.5-1.55--->y放大2倍
{ value: 1, duration: 450 },//-----1.55-2.0------->y缩小到1
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
//-3.0-3.05-->y放大1.75
{ value: 1, duration: 450 }//----3.05-3.5------>缩小到1
]
});
//0--左侧上移1---0.5---上侧右移动----1.5----右侧下移----2.0------下侧左移动-----
//3.0----左侧上移动2-----3.5(结束)