Stay Hungry,Stay Foolish!

一个流行的网页动画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

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

 

posted @   lightsong  阅读(1406)  评论(0编辑  收藏  举报
编辑推荐:
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
阅读排行:
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
千山鸟飞绝,万径人踪灭
点击右上角即可分享
微信分享提示