一个流行的网页动画JS库 -- animejs

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')}
    });

 

练练手

https://github.com/fanqingsong/sun_system_on_animejs

实现一个太阳系行星围绕太阳运转动画。