一个流行的网页动画JS库

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

animejs

https://animejs.com/

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
此库是一个轻量级的JS动画库，带有简单和强大的API。
Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties.
Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element.
Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions.
Anime.js works with anything web. CSS, SVG, DOM attributes and JavaScript Objects: animate everything with a single unified API.

GITHUB上有33K的favorites。

https://github.com/juliangarnier/anime/

例子

https://animejs.com/documentation/

物体沿着一条path行进， path的入参数，表示的DOM对象，可以是一个path，也可以是任意的一个特殊图形，如圆圈，抛物线。

https://animejs.com/documentation/#motionPath

var path = anime.path('.motion-path-demo path');anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});

教学库

https://github.com/joao-pratas/animejs-tut

https://github.com/joao-pratas/animejs-tut/tree/master/anime-master/documentation/examples

时间线接口，可以串起来每一个小步骤。

https://github.com/joao-pratas/animejs-tut/blob/master/anime-master/documentation/examples/anime-timeline.html

var noOffset = anime.timeline({
autoplay: true
});
noOffset
.add({
targets: '.no-offset',
translateX: -100,
translateY: -100,
scale: 2,
background: '#FF1461',
begin: function() { console.log('noOffset animation 1 began')},
complete: function() { console.log('noOffset animation 1 completed')}
})
.add({
targets: '.no-offset',
translateX: -100,
translateY: 100,
scale: 3,
background: '#18FF92',
begin: function() { console.log('noOffset animation 2 began')},
complete: function() { console.log('noOffset animation 2 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: 100,
rotate: 120,
scale: 4,
background: '#5A87FF',
begin: function() { console.log('noOffset animation 3 began')},
complete: function() { console.log('noOffset animation 3 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: -100,
scale: 5,
background: '#FBF38C',
begin: function() { console.log('noOffset animation 4 began')},
complete: function() { console.log('noOffset animation 4 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: -100,
scale: '+=8',
background: '#FBF38C',
begin: function() { console.log('noOffset animation 5 began')},
complete: function() { console.log('noOffset animation 5 completed')}
});