标签：dom += form library 参数 add event html orm
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‘)} });
标签：dom += form library 参数 add event html orm
原文地址：https://www.cnblogs.com/lightsong/p/11854088.html
