anime.js

anime.js 

anime.js(/ˈæn.ə.meɪ/)是一个轻量、灵活的javaScript 动画库.他可以配合css，svg，Dom节点和js对象工作。

特点

• 详细动画参数
• 详细的目标值
• 多重定时
• 回放控制
• 动作路径

例子和demo

• CodePen demos and examples
• juliangarnier.com
• anime-js.com
• kenzo.com/en/thejunglebook
• Stress test

Animation example

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

浏览器支持

• Chrome
• Safari
• Opera
• Firefox
• IE 10+

快速开始

npm install animejs / bower install animejs or download

然后插入anime.min.js 到你的html中:

<script src="anime.min.js"></script>

或者用import的方式导入anime.js

import anime from 'animejs'

API

目标值

定义动画元素或者动画js对象

Accept	Examples
CSS Selectors	'div','.thing','path'
DOM Element	document.querySelector('.thing')
Nodelist	document.querySelectorAll('.thing')
JavaScript Object	{prop1: 100, prop2: 200}
JavaScript Array	['.thing-1', 'div']

变量

Names	Defaults	Types
delay	0	number, function (el, index, total)
duration	1000	number, function (el, index, total)
autoplay	true	boolean
loop	false	number, boolean
direction	'normal'	'normal', 'reverse', 'alternate'
easing	'easeOutElastic'	console log anime.easings to get the complete functions list
elasticity	400	number (higher is stronger)
round	false	number, boolean
begin	undefined	function (animation)
update	undefined	function (animation)
complete	undefined	function (animation)

Specific animation parameters

参数可以设置用Object的方式个别设置

参数为 :

• value (required)
• delay
• duration
• easing

例如:

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: {
    value: 180,
    duration: 1500,
    easing: 'easeInOutQuad'
  },
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  direction: 'alternate',
  loop: true
});

Live example on CodePen

Multiple timing values

Delays and durations can be specific to each targeted elements by using a function.

Available function arguments:

Positions	Names	Infos
1	target	The targeted element
2	index	The target index (start at 0)
3	length of targets	The total number of targets (start at 0)

Example:

anime({
  targets: 'div',
  translateX: '13.5rem',
  scale: [.75, .9],
  delay: function(el, index) {
    return index * 80;
  },
  direction: 'alternate',
  loop: true
});

Live example on CodePen

List of valid animatable properties

Any property can be animated, as long as the property value contains at least one numerical value.

Types	Examples
CSS Properties	width, borderRadius, 'background-color'
Individual transforms	translateX, rotate, scaleY
SVG attributes	d, rx, transform
DOM attributes	value, volume
Object properties	any object property containing at least one number

Property values

Single value

Defines the end value of the animation.

Types	Examples	Infos
String	'100rem'	Recommended technique. Will force the animation to use a specific value, but doesn't convert units.
Number	100	Will use default units if possible. Doesn't work with properties that aren't specified in the CSS, or non-numerical values (e.g. margin: auto; left: auto; etc..).

Example:

.div {
  width: 20px;
}

anime({
  targets: 'div',
  translateX: '3rem', // Will translate the div from '0rem' to '3rem'
  width: '100', // Will be converted to '100px' because the width is '20px' in the CSS
});

From To values

Defines the start and end values of the animation.

Example:

anime({
  targets: 'div',
  translateX: [50, 250] // Will start at 50px and end at 250px
});

Specific target values

Property values can be specific to each targeted elements by using a function.

Available function arguments:

Positions	Names	Infos
1	target	The targeted element
2	index	The target index (start at 0)

Examples:

anime({
  targets: 'div',
  translateX: function(el, index) {
    return anime.random(50, 100); // Will set a random value from 50 to 100 to each divs
  }
});

Live example on CodePen

anime({
  targets: 'path',
  strokeDashoffset: function(el) {
    var pathLength = el.getTotalLength();
    return [pathLength, 0]; // Will use the exact path length for each targeted path elements
  }
});

Live example on CodePen

Playback controls

Play, pause, restart and seek the animation.

Names	Infos	Arguments
.play()	Play the animation	animation parameters object
.pause()	Pause the animation	none
.restart()	Restart the animation	animation parameters object
.seek()	Advance in the animation	a percentage, or an object {time: 1250}

var myAnimation = anime({
  targets: 'div',
  translateX: 100,
  autoplay: false
});

myAnimation.play(); // Manually play the animation

Live example on CodePen

Motion path

Animate the transform properties along an SVG path by using the anime.path() Object.

Transforms compatible with a motion path:

Names	Infos
translateX	follow the x path coordinate
translateY	follow the y path coordinate
rotate	follow the path angle value

Notes: IE cannot apply CSS transforms on SVG elements.

Example:

var myPath = anime.path('path');

anime({
  targets: 'div',
  translateX: myPath,
  translateY: myPath,
  rotate: myPath
});

Live example on CodePen

JS Object

Animate any JS Object attribute.

Example:

var myObject = {
  one: 0,
  two: 2000
}

var myAnimation = anime({
  targets: myObject,
  one: 9999,
  two: 4200,
  duration: 5000,
  round: true,
  easing: 'linear',
  loop: true,
  update: function() {
    console.log(myObject);
  }
});

Live example on CodePen

Helpers

anime.list

Return an array of all active animations objects

anime.list;

anime.speed = x

Change all animations speed (from 0 to 1).

anime.speed = .5; // Will slow down all animations by half of their original speed

anime.easings

Return the complete list of anime.js easing functions

anime.easings;

anime.remove(target)

Remove one or multiple targets from the animation.

anime.remove('.item-2'); // Will remove all divs with the class '.item-2'

anime.getValue(target, property)

Get current valid value from an element.

anime.getValue('div', 'translateX'); // Will return '100px'

anime.random(x,y)

Generate a random number between two numbers.

anime.random(10, 40); // Will return a random number between 10 and 40