为什么Amicro的动画如此丝滑揭秘5组Spring物理预设snappy/bouncy/smooth/gentle/stiff【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicrosubhanhq/amicro是一个基于 Motion 的 React 微交互动画组件库内置 150 个加载动画、入场过渡、悬停特效组件。它动画丝滑的秘密藏在 registry/lib/presets.ts 这个文件里——5 组精心调校的Spring 物理预设snappy、bouncy、smooth、gentle、stiff。今天我们就来拆解这 5 组弹簧参数看看它们如何决定动画的手感。为什么用 Spring 弹簧而不是写个时长很多新手写动画习惯这样transition: 0.3s ease——固定时长 缓动曲线。但问题在于固定时长无法响应中断。你在动画进行到一半时移动鼠标、切换状态元素只能生硬地重新播放这就是卡顿感的来源。Spring 弹簧动画则不同它不关心多久走完而是模拟一个真实的弹簧——元素在刚度stiffness、阻尼damping、质量mass三个参数驱动下永远朝着目标位置弹过去。任何时刻打断它它都能从当前状态自然衔接因此看起来永远流畅、有物理惯性这就是丝滑感的本质。Amicro 的组件全部基于motion/react驱动而 5 组 Spring 预设就是它手感的配方库。5组Spring预设完整参数清单以下是 Amicro 官方预设的完整参数可直接作为你项目中的弹簧动画起点预设刚度 stiffness阻尼 damping质量 mass一句话手感snappy400280.8超快响应干脆利落几乎不回头bouncy300151明显回弹活泼俏皮smooth220241优雅默认值快慢均衡gentle120141低速柔和从容舒缓stiff500400.5高张力紧绷精准零过冲 记忆口诀刚度决定弹簧多硬阻尼决定晃几下停下来质量决定分量多重。刚度越高动画越快阻尼越大过冲 overshoot 越少质量越大惯性越足、越肉。完整源码见 registry/lib/presets.ts该文件同时以 shadcn 注册表条目形式发布registry/lib/presets.json可一键安装到你的项目。逐个拆解5组预设各适合什么场景1️⃣ snappy —— 需要跟手的一切交互参数特征刚度 400 很高质量 0.8 偏轻阻尼 28 足以抑制回弹手感指针移过去元素几乎贴手跟上落点干脆、几乎没有余晃适合抽屉菜单、Tooltip、按钮按压、需要即时响应的 UI2️⃣ bouncy —— 让界面活起来的调皮预设参数特征阻尼只有 15是五组中最欠管教的手感元素到位后会明显弹跳一两下才稳住像果冻适合点赞动画、徽章弹出、游戏化交互、趣味性强的产品3️⃣ smooth —— 万金油默认值参数特征各项参数居中是 Amicro 的标准手感手感不抢戏、不拖沓快速且优雅地收敛适合页面元素入场、卡片展开等绝大多数常规过渡4️⃣ gentle —— 大位移、长距离移动的专属参数特征刚度只有 120是五组中最慢热的手感像雾一样缓慢铺开、轻柔收尾如上图的云雾感适合全屏背景淡入、视差滚动、大尺寸面板的展开——大距离移动务必用 gentle否则高刚度会让元素飞过来5️⃣ stiff —— 精密仪器级控制参数特征刚度拉满 500阻尼 40 最高质量 0.5 最轻手感紧绷、精准、零回弹像被钉到目标上适合进度条数值跳动、图表指针、对精度敏感的数据可视化 顺带一提部分组件会按场景自定义弹簧例如磁吸按钮 registry/ui/hover/magnetic-button.tsx 用stiffness: 150, damping: 15, mass: 0.6营造出被磁铁吸住又弹回的弹性而入场组件 registry/ui/entrance/fade-up.tsx 则选择贝塞尔曲线easeOutExpo来获得更快的起始加速——弹簧与曲线按需搭配是 Amicro 手感细腻的另一个细节。如何在自己项目中用上这5组预设方式一通过 Amicro CLI 直接添加组件组件内已内置对应预设npx subhanhq/amicrolatest init npx subhanhq/amicrolatest add fade-up方式二用 shadcn CLI 把 presets 工具文件装进项目之后所有自写动画都能直接引用npx shadcn add amicro/presets拿到预设后在任意motion组件上即可使用motion.div animate{{ x: 100 }} transition{presets.bouncy} /CLI 与注册表的完整用法说明见 README.md。选型速查表3秒选出对的预设你的场景推荐预设按钮、菜单、跟手交互snappy点赞、弹出、趣味特效bouncy拿不准时的默认选择smooth背景、视差、大位移gentle数据、进度、精密对齐stiff总结Amicro 的丝滑不来自某一个魔法参数而来自一套完整的手感工程Spring 物理驱动——天然支持中断与衔接告别生硬重播5 组预设覆盖全部常见场景——snappy 快、bouncy 弹、smooth 稳、gentle 柔、stiff 准场景化定制——按组件类型微调弹簧参数而非一套参数走天下下次写动画时不妨先问自己我想要的是一张贴手的抽屉还是一团果冻 答案对应的就是该选哪组 Spring 预设。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
为什么Amicro的动画如此丝滑揭秘5组Spring物理预设snappy/bouncy/smooth/gentle/stiff【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicrosubhanhq/amicro是一个基于 Motion 的 React 微交互动画组件库内置 150 个加载动画、入场过渡、悬停特效组件。它动画丝滑的秘密藏在 registry/lib/presets.ts 这个文件里——5 组精心调校的Spring 物理预设snappy、bouncy、smooth、gentle、stiff。今天我们就来拆解这 5 组弹簧参数看看它们如何决定动画的手感。为什么用 Spring 弹簧而不是写个时长很多新手写动画习惯这样transition: 0.3s ease——固定时长 缓动曲线。但问题在于固定时长无法响应中断。你在动画进行到一半时移动鼠标、切换状态元素只能生硬地重新播放这就是卡顿感的来源。Spring 弹簧动画则不同它不关心多久走完而是模拟一个真实的弹簧——元素在刚度stiffness、阻尼damping、质量mass三个参数驱动下永远朝着目标位置弹过去。任何时刻打断它它都能从当前状态自然衔接因此看起来永远流畅、有物理惯性这就是丝滑感的本质。Amicro 的组件全部基于motion/react驱动而 5 组 Spring 预设就是它手感的配方库。5组Spring预设完整参数清单以下是 Amicro 官方预设的完整参数可直接作为你项目中的弹簧动画起点预设刚度 stiffness阻尼 damping质量 mass一句话手感snappy400280.8超快响应干脆利落几乎不回头bouncy300151明显回弹活泼俏皮smooth220241优雅默认值快慢均衡gentle120141低速柔和从容舒缓stiff500400.5高张力紧绷精准零过冲 记忆口诀刚度决定弹簧多硬阻尼决定晃几下停下来质量决定分量多重。刚度越高动画越快阻尼越大过冲 overshoot 越少质量越大惯性越足、越肉。完整源码见 registry/lib/presets.ts该文件同时以 shadcn 注册表条目形式发布registry/lib/presets.json可一键安装到你的项目。逐个拆解5组预设各适合什么场景1️⃣ snappy —— 需要跟手的一切交互参数特征刚度 400 很高质量 0.8 偏轻阻尼 28 足以抑制回弹手感指针移过去元素几乎贴手跟上落点干脆、几乎没有余晃适合抽屉菜单、Tooltip、按钮按压、需要即时响应的 UI2️⃣ bouncy —— 让界面活起来的调皮预设参数特征阻尼只有 15是五组中最欠管教的手感元素到位后会明显弹跳一两下才稳住像果冻适合点赞动画、徽章弹出、游戏化交互、趣味性强的产品3️⃣ smooth —— 万金油默认值参数特征各项参数居中是 Amicro 的标准手感手感不抢戏、不拖沓快速且优雅地收敛适合页面元素入场、卡片展开等绝大多数常规过渡4️⃣ gentle —— 大位移、长距离移动的专属参数特征刚度只有 120是五组中最慢热的手感像雾一样缓慢铺开、轻柔收尾如上图的云雾感适合全屏背景淡入、视差滚动、大尺寸面板的展开——大距离移动务必用 gentle否则高刚度会让元素飞过来5️⃣ stiff —— 精密仪器级控制参数特征刚度拉满 500阻尼 40 最高质量 0.5 最轻手感紧绷、精准、零回弹像被钉到目标上适合进度条数值跳动、图表指针、对精度敏感的数据可视化 顺带一提部分组件会按场景自定义弹簧例如磁吸按钮 registry/ui/hover/magnetic-button.tsx 用stiffness: 150, damping: 15, mass: 0.6营造出被磁铁吸住又弹回的弹性而入场组件 registry/ui/entrance/fade-up.tsx 则选择贝塞尔曲线easeOutExpo来获得更快的起始加速——弹簧与曲线按需搭配是 Amicro 手感细腻的另一个细节。如何在自己项目中用上这5组预设方式一通过 Amicro CLI 直接添加组件组件内已内置对应预设npx subhanhq/amicrolatest init npx subhanhq/amicrolatest add fade-up方式二用 shadcn CLI 把 presets 工具文件装进项目之后所有自写动画都能直接引用npx shadcn add amicro/presets拿到预设后在任意motion组件上即可使用motion.div animate{{ x: 100 }} transition{presets.bouncy} /CLI 与注册表的完整用法说明见 README.md。选型速查表3秒选出对的预设你的场景推荐预设按钮、菜单、跟手交互snappy点赞、弹出、趣味特效bouncy拿不准时的默认选择smooth背景、视差、大位移gentle数据、进度、精密对齐stiff总结Amicro 的丝滑不来自某一个魔法参数而来自一套完整的手感工程Spring 物理驱动——天然支持中断与衔接告别生硬重播5 组预设覆盖全部常见场景——snappy 快、bouncy 弹、smooth 稳、gentle 柔、stiff 准场景化定制——按组件类型微调弹簧参数而非一套参数走天下下次写动画时不妨先问自己我想要的是一张贴手的抽屉还是一团果冻 答案对应的就是该选哪组 Spring 预设。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
