Anime.js：7 万 Star 的 JavaScript 动画库，V4 版本重新定义了动画语法

文章目录Anime.js7 万 Star 的 JavaScript 动画库V4 版本重新定义了动画语法1、 为什么它能拿到 7 万 Star2、 支持哪些能力3、 安装与使用4、 适合谁用Anime.js7 万 Star 的 JavaScript 动画库V4 版本重新定义了动画语法Anime.js 在 GitHub 上已经拿到了 70.6K Star。这是一款轻量级的 JavaScript 动画库用于处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象的动画。它不需要 jQuery 或其他依赖纯原生 JavaScript 就能跑。1、 为什么它能拿到 7 万 Star前端动画库不少GSAP、Framer Motion、Motion One 各有拥趸。Anime.js 的定位很明确API 简单但能力不简单。看一段 V4 版本的代码就明白了import{animate,stagger}fromanimejs;animate(.square,{x:320,rotate:{from:-180},duration:1250,delay:stagger(65,{from:center}),ease:inOutQuint,loop:true,alternate:true});声明式写法链式调用stagger 延迟动画内置支持。从一个简单的方块移动到复杂的交错动画序列写法上的差异不大。2、 支持哪些能力Anime.js V4 的工作方式是基于 ES Module 导入按需加载不会把整个库全量打包进去。它覆盖的动画场景包括CSS 属性动画transform、opacity、color 等SVG 路径动画和变形动画DOM 属性的逐帧变化JavaScript 对象的数值插值时间线编排和 stagger 交错效果缓动函数自定义每个能力都有对应的示例代码项目仓库里附带了一个 examples 目录可以在本地启动预览。3、 安装与使用通过 npm 安装npminstallanimejsV4 版本使用 ES Module 导入只引入你需要的函数import{animate,scroll,timeline,stagger}fromanimejs;如果从 V3 迁移到 V4项目仓库 Wiki 里有完整的迁移指南。提供几个开发脚本npm run dev进入开发模式监视文件变化npm run build打包 ESM、UMD、CJS、IIFE 多版本npm run test:browser启动浏览器测试。4、 适合谁用需要在前端项目里快速实现复杂动画的前端开发者想做 SVG 动画但不想上重型的 GSAP 的团队对代码体积敏感、希望按需加载动画库的项目做交互动画原型、需要快速验证效果的设计师作者 Julian Garnier 将项目以 MIT 协议开源没有任何付费墙或功能限制。做交互动画原型、需要快速验证效果的设计师作者 Julian Garnier 将项目以 MIT 协议开源没有任何付费墙或功能限制。