挖到一个能让你动画写得比说话还快的库
上周改一个页面动效，用GSAP调了半天弹簧参数，结果一跑起来还是卡卡的。正想摔键盘，同事甩过来一个链接说：试试这个。我点开一看，好家伙，Motion One，前身就是Framer Motion，现在独立出来了，完全开源、MIT协议、免费。
【这库到底有多小】 最让我震惊的是它的体积。纯HTML/SVG版本的animate()函数只有2.3kb，官网说API比GSAP小90%。不是那种阉割版的小，是正经能用的动画库。而且它有个混合引擎——能用浏览器原生Web Animations API跑的就用原生，跑不了的回退到JavaScript。所以你在手机上划拉页面，能跑到120fps，跟原生App一个手感。
【上手快得离谱】 如果你用React，直接装`motion/react`包，然后写一个`<motion.button>`，加个`animate={{opacity: 1}}`就动起来了。支持独立变换，同一个元素上同时控制x、y、rotate、scale，不用套一堆wrapper。还有原生手势——hover、press、drag，感觉就像浏览器自己长出来的功能，不是后贴上去的。最骚的是布局动画，加一个`layout`属性，两个不同布局之间的切换自动补间，丝滑到离谱。
【400多个即拿即用的例子】 官网有400多个复制粘贴就能用的例子，从骨架屏闪烁到打字机效果、无限滚动跑马灯，甚至iOS文件夹那种弹出动画都有。你还可以用AI Kit把你的AI agent喂饱Motion的文档和例子，让它直接帮你生成动效代码。如果你想要更完整的体系，Motion+一次性付费、终身更新，解锁高级API和社区权限。
【最后说个实在的】 这库已经被Framer和Figma用在几十万个站点上了，npm月下载量超过3000万。如果你最近在折腾页面动效，或者想给项目加点不油腻的交互感，可以去motion.dev逛一圈。你平时写动画最头疼什么？评论区聊聊。
评论
暂无评论