一个流行的网页动画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
实现一个太阳系行星围绕太阳运转动画。
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)