安装npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-spring.json
- 目的
- 通过刚度、阻尼、质量和初速度塑造可中断、保留速度的物理响应。
- 触发
- 由拖拽释放、目标位置变化或状态切换触发,并传入当前速度。
- 可中断性
- 新目标立即接管当前位移和速度,这是弹簧体验的核心要求。
- 减弱动效
- 采用高阻尼或即时到达,取消回弹和持续微振荡。
spring弹簧由张力、质量和阻尼等物理参数驱动的运动,不依赖固定时长。
stiffness-tension刚度 / 张力弹簧拉向目标的力度,数值越高,响应越干脆。
damping阻尼弹簧稳定下来的速度;阻尼越低,回弹和振荡越明显。
mass质量动画元素呈现出的重量;质量越大,运动越慢、越沉。
bounce弹跳弹簧越过目标后再稳定下来,为动作增加活泼感。
perceptual-duration感知时长弹簧在感知上完成所需的时长,尽管底层仍在进行微小的收敛。
momentum动量保留速度并继续前进的运动,常见于拖拽释放或动画中断之后。
velocity速度元素移动的快慢与方向;弹簧会在中断时把它带入下一段动画,使被快速甩动的元素保留速度。
interruptible-animation可打断动画动画可以在运行途中平滑地改变目标,无需等待当前动作完成。