文章目录mojs给网页加一点会动的玩意儿1、 它能做什么2、 怎么装3、 生态里还有啥4、 学习成本5、 浏览器兼容6、 谁在维护7、 适合谁用mojs给网页加一点会动的玩意儿mojs 在 GitHub 上已经累积 18,719 个 Star 了。这是一个 JavaScript 动效库干的事情很集中就是在网页上做动态图形。和 GSAP、Anime.js 这些主流库相比它的语法和动画结构走的是另一条路。声明式 API 让你对动画的每个细节都有控制权。1、 它能做什么开箱即用的一堆组件html、shape、swirl、burst、stagger。这些是基础积木拼起来能做出按钮点击炸开、图标变形、文字逐字浮现这种动效。对外宣传的关键词是 retina ready、modular、open source。说人话就是高分辨率屏幕不糊按需引入不臃肿源码摊开给你看。2、 怎么装走 bundler 那条线最稳。npm 一行下去npminstallmojs/coreyarn 也行yarn add mojs/core然后在入口文件里像普通模块一样引进来importmojsfrommojs/core;newmojs.Html({// 配置项});不愿意搭构建工具的直接从 CDN 拉一个 UMD 文件塞到 script 标签里也能跑。unpkg 和 jsdelivr 任选默认走 latest 版本。scriptsrchttps://unpkg.com/mojs/core/scriptscriptnewmojs.Html({// 配置项});/scriptbundler 路线的好处是压缩、tree shaking、code splitting 全都能用上生产环境还是走这个。3、 生态里还有啥mojs 自身只管核心动画引擎周边工具另起项目。mojs/player 是个时间轴播放器做复杂动画时来回拖时间线看效果。mojs/curve-editor 给缓动曲线可视化编辑。mojs/timeline-editor 专门管时间轴。这三个工具凑一起差不多就是个简易版的动效编辑器调参数不用反复改代码刷新页面。4、 学习成本官方教程分了几档。Getting Started 起步Shape Swirl 和 Burst 是先讲的两块基础。Codrops 上有个 icon 动画教程CSS Tricks 有篇入门YouTube 和 Vimeo 上也有视频。API 文档放在 mojs.github.io/api。看一遍 demo 再翻 API 大致就能上手。5、 浏览器兼容Chrome 49、Firefox 70、Opera 36、Safari 8、Edge 79。老浏览器基本不用想但现代浏览器的覆盖面足够大。6、 谁在维护2019 年起生态由 Xavier Foucrier 和 Jonas Sandstedt 两个人维护开发。GitHub 上 issue 区活跃Slack 工作区也开着新人进 Slack 有专门的邀请链接。7、 适合谁用做前端动效想跳出 GSAP 舒适区的。需要做点击爆开、形状变形这类 burst 动效的。愿意接受声明式 API 写法的。对动画细节有控制需求、不想被预设动画套住的。star 数不到 2 万不算顶流但活跃度和生态完整度都在线。要不要上手看你手头的活儿值不值得为它绕一段学习曲线。节有控制需求、不想被预设动画套住的。star 数不到 2 万不算顶流但活跃度和生态完整度都在线。要不要上手看你手头的活儿值不值得为它绕一段学习曲线。