码迷,mamicode.com
首页 > Web开发 > 详细

一个流行的网页动画JS库

时间:2019-11-14 00:15:53      阅读:29      评论:0      收藏:0      [点我收藏+]

标签:dom   +=   form   library   参数   add   event   html   orm   

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

 

一个流行的网页动画JS库

标签:dom   +=   form   library   参数   add   event   html   orm   

原文地址:https://www.cnblogs.com/lightsong/p/11854088.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!