Amicro加载动画清单三30几何形状SpinnerNewtons Cradle到Infinity Path完整指南【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-还在用单调的转圈小点当页面加载动画Amicro 是一个基于 Motionframer-motion构建的 React 微交互组件库其中的Geometric Shapes几何形状分组一口气收录了 35 款加载动画 Spinner——从经典的 Newtons Cradle 牛顿摆到流动的 Infinity Path 无限符号覆盖正方形、菱形、三角形、六边形、立方体、折纸等几乎所有几何形态。本篇带你快速逛完这份「几何形状 Spinner 清单」帮你为 React / Next.js / Vite 项目挑到最合适的那一款。这份清单是什么Amicro 把全部加载动画按风格分成了 5 大组物理模拟、点与脉冲、圆环与 Spinner、条形与波形、几何形状。本篇聚焦最后一组——它也是视觉辨识度最高的一组不靠圆环、不靠小点而是用纯粹的几何图形讲故事。全部 35 个组件的源码位于 registry/ui/loading/组件目录数据定义在 src/data/loaders.ts每个组件还配有可直接被 shadcn CLI 安装的 JSON 注册表文件例如 newtons-cradle.json。方形系Spinner 清单中的绝对主力正方形是这组的中流砥柱风格从极简到机械感拉满组件视觉效果源码位置Flip Square方块翻转切换姿态flip-square.tsxSpinning Squares多个方块交错旋转spinning-squares.tsxBouncing Square方块上下弹跳bouncing-square.tsxBreathing Square方块缩放呼吸breathing-square.tsxPulse Square方块脉冲发光pulse-square.tsxElastic Square弹性形变回弹elastic-square.tsxSquare Snake方块排队变形成蛇square-snake.tsxSquare Grid网格方块逐个点亮square-grid.tsxWandering Cube小方块绕大框巡游旋转wandering-cube.tsx其中Wandering Cube非常值得一提一个小方块沿着 40px 正方形的边框依次走完四边同时自身旋转一整圈像极了正在绕场一圈的加载隐喻。菱形系旋转 45° 的另一种优雅组件视觉效果源码位置Floating Diamonds多个菱形上下漂浮floating-diamonds.tsxDiamond Grid菱形网格逐格闪烁diamond-grid.tsxDiamond Spin菱形带弹性旋转diamond-rotate-spring.tsxFluid Diamond流体质感的菱形变形fluid-diamond.tsx菱形本质是旋转 45° 的正方形但视觉重心更高、更锋利适合搭配科技感更强的界面。三角与六边形少见的多边形 SpinnerRotating Triangle三角形绕中心匀速旋转最朴素的多边形 Spinner见 rotating-triangle.tsxMinimal Triangle极简线条三角见 minimal-triangle.tsxHexagon Spinner经典的描边巡游手法——六边形底框保持淡色一条描边沿线程不断游走见 hexagon-spinner.tsxSpring Hexagon六边形叠加弹簧弹性见 spring-hexagon.tsx路径与曲线Infinity Path 为什么值得单独拎出这组里最有艺术感的是两条无限主题Infinity Pathinfinity-path.tsxSVG 双环路径 strokeDashoffset描边动画一条深色线条在浅色的 ∞ 轨道上匀速巡航线性缓动、无缝循环是科技感无限加载的教科书式实现。Morphing Infinitymorphing-infinity.tsx无限符号本身的粗细与弧度不断流动变形。与之相近的还有Spiral Spinnerspiral-spinner.tsx螺旋线旋转以及Zig Zag Pulsezig-zag-pulse.tsx折线脉冲。物理与机械感从 Newtons Cradle 到 Hourglass这组最好玩的一类把真实物理现象搬进了加载动画组件灵感来源源码位置Newtons Cradle牛顿摆两端小球交替摆动中间三球静止newtons-cradle.tsxPendulum单摆左右 45° 往复pendulum.tsxHourglass沙漏翻转hourglass.tsxGears齿轮机械咬合感位于 Rings Spinners 组Newtons Cradle的实现很轻巧4 个圆点首尾两颗分别以rotate: [25, 0, 0, 0, 0, 25]和[0, 0, 0, -25, 0, 0]的 keyframes 错峰摆动newtons-cradle.tsx一眼就能认出这是牛顿摆。这类有记忆点的动画特别适合品牌化的等待页。变形与折叠Morphing 系列收尾Morphing Shapemorphing-shape.tsx方块 ↔ 圆角 → 圆形三种borderRadius姿态循环渐变同时旋转缩放是形状变形的入门范本。Origamiorigami-shape.tsx折纸式折叠立体感十足。Cube Flipcube-flip-spring.tsx立方体带弹性翻转。Shape Shift Gridshape-shift-grid.tsx整片网格中的图形集体变形。Pumping Heart / Heartbeatpumping-heart.tsx、heartbeat.tsx心跳节奏的脉冲适合健康类应用。如何一键装到你的项目所有组件都支持 shadcn 风格的安装方式无需整包依赖# 通过 CLI 直接添加组件源码到项目中 npx subhanhq/amicrolatest init也可以在components.json中配置amicro命名空间后按名字安装详见 README.md。组件采用 copy-to-code 模式——装进来的是 TSX 源码而非运行时依赖改颜色、改尺寸完全自由且零额外运行时开销。挑选建议3 个问题定款式等待时长短3s选节奏快的如 Square Snake、Spinning Squares需要品牌记忆点选有隐喻的如 Newtons Cradle、Hourglass、Infinity Path界面极简风选单元素小面积款如 Minimal Triangle、Breathe Ring 同类的 Breathing Square小结Amicro 的 Geometric Shapes 分组用 35 款纯几何加载动画证明了——Spinner 不必是转圈。每一款都是独立、可复制、可定制的 React 组件源码集中在 registry/ui/loading/配合 src/data/loaders.ts 的分组目录即可快速浏览选型。下一篇我们继续盘点 Text Interface 组的文字加载动画别忘了回来看看【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考