Amicro加载动画清单四文字、终端与Apple风格Dynamic Island/Face ID加载组件【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicro 是一个基于 React Motion 的加载动画Loading 组件开源合集。本篇清单聚焦三大类共 25 个加载组件文字加载动画、终端风格加载动画与Apple 风格加载动画含 Dynamic Island 灵动岛、Face ID 扫描全部即插即用帮助新手快速为项目添加高级感等待动效。本集速览三大类加载动画一览类别组件数量典型效果适用场景✍️ 文字加载动画12文字闪烁、打字光标、字符逐字弹出思考中、内容生成、AI 对话️ 终端风格加载动画2~ %光标闪烁、黑底命令行开发者工具、科技感界面 Apple 风格加载动画11灵动岛呼吸、Face ID 扫描线、Siri 声浪移动端、拟物化交互所有组件的注册信息都集中在 registry.json每个组件对应一个 JSON 描述文件包含名称、效果说明与完整源码。一、文字加载动画8 种经典等待文案动效文字类加载动画用一句话的状态如 Thinking、Loading替代转圈非常适合 AI 对话、内容渲染等待场景。闪烁与打字机最直观的等待暗示组件名视觉效果效果说明text-blink文字呼吸Thinking 文字以 1.5s 周期透明度闪烁节奏柔和text-morph文字变形两段文字上下交错轮播形成无缝文字变形typing打字光标Loading 后跟一个闪烁方块光标模拟打字机typing-indicator三点弹跳聊天软件风格的圆角气泡 三颗依次跳动的小圆点text-shimmer文字微光用渐变遮罩让高亮色横向扫过文字思考中的高级写法text-shimmer-wave微光波浪微光效果叠加波浪节奏视觉更灵动对应的组件源文件shadcn 注册格式例如 text-blink.json、text-morph.json、typing.json、typing-indicator.json、text-shimmer.json打开即可看到每个动画不过几十行motion声明非常适合学习实现思路。弹性文字弹出spring-text-popspring-text-pop.json 把 Loading... 按字符拆分每个字符以 0.08s 间隔从底部依次跳一下配合底部原点缩放origin-bottom像小弹簧一样活泼适合轻量趣味界面。文字揭示动画加载完成的入场效果除了等待态Amicro 还收录了 4 个文字入场揭示组件源码位于 registry/ui/text/ 目录character-staggercharacter-stagger.tsx逐字错峰浮入支持调整时长、间隔与位移word-revealword-reveal.tsx逐词淡入 缩放标题渐显利器text-revealtext-reveal.tsx整行文字依次滑出blur-textblur-text.tsx模糊 → 清晰的标题过渡质感拉满 搭配技巧等待时用text-shimmer数据返回后接word-reveal展示标题两个组件无缝衔接。二、终端风格加载动画给开发者看的等待界面终端风加载动画自带正在处理的专业氛围适合 CLI 风格网页、部署面板与后台系统。组件名视觉效果效果说明mac-terminalMac 提示符显示~ %加闪烁方块光标极简 macOS 终端质感terminal-loader终端面板黑底圆角小窗口$ loading...与绿色提示符交替闪烁像真实命令行在跑任务两个组件分别见 mac-terminal.json 与 terminal-loader.json。核心技巧是用font-mono等宽字体 1s 线性循环的透明度动画代码量极小但氛围感很强。三、Apple 风格加载动画11 个精致拟物细节Apple 风格加载动画的共同特点小尺寸、克制配色、缓动柔和。这一类组件最容易被直接搬进产品。明星组件Dynamic Island 与 Face ID 扫描Dynamic Island 灵动岛dynamic-island.json 模拟 iPhone 灵动岛黑色胶囊整体宽度在 80↔110px 之间缓慢呼吸内部左侧是一颗呼吸的翠绿色状态点右侧三条短竖线以 0.15s 错位跳动模拟语音波形。放在页面顶部或卡片里瞬间有原生 App的味道。Face ID 扫描face-id-scan.json 圆角方框内是 Face ID 图标一道绿色渐变扫描线以匀速2.5s 周期上下扫过整个图标精准复刻正在识别面容的交互。识别成功前、解锁等待中都能用。更多 Apple 细节动效组件名视觉效果apple-breathe6 片青蓝色扇区交替渐显如呼吸般起伏apple-equalizer4 根随机错落的均衡器竖条apple-sound-wave5 根对称声波中间高两边低apple-pulse-dots3 颗圆点依次放大淡入克制版的三点apple-scale-pulse同心圆环向外扩散消散apple-icon-morph方块 ↔ 圆形 圆角变形 旋转apple-text-revealLoading 文字上下滚动揭示apple-unlockSlide to unlock 上扫过一道渐变光带siri-waveSiri 经典的 5 根等高声浪柱 挑选建议语音/语音助手场景选siri-wave或dynamic-island身份验证、解锁场景选face-id-scan通用等待用apple-pulse-dots最百搭。如何一键安装这些加载组件Amicro 提供 CLI 与 shadcn/ui 两种安装方式组件代码会直接复制进你的项目copy-to-code零运行时依赖。方式一Amicro CLInpx subhanhq/amicrolatest add dynamic-island方式二shadcn 命名空间在components.json注册amicro后npx shadcn add amicro/face-id-scan安装后组件落到components/amicro/下按你的品牌色微调 Tailwind 类名即可。环境要求Node ≥ 18、React 18/19、Tailwind 3/4、motion库。相关文件速查文件 / 目录说明registry/registry.json全部 150 组件的注册总表名称、描述、依赖registry/ui/每个加载动画组件的 JSON 注册文件含完整源码registry/ui/text/4 个文字揭示动画的 TSX 源文件registry/hooks/配套 hooksuse-reduced-motion、use-stagger等src/data/loaders.ts站内加载动画展示页的组件清单数据scripts/generate-loaders-code.js批量生成加载组件代码的脚本写在最后文字类加载动画适合内容型等待终端类适合工具型界面Apple 风格则是最容易出彩的拟物细节。建议先从text-shimmer、dynamic-island、face-id-scan三个明星组件入手跑通后再按 registry.json 逐个替换成最适合自己产品的动效。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
