svelte-motion 过渡类型全解析：tween、spring、keyframes 如何选择最适合的动画？
【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion
svelte-motion 是一款基于 framer-motion 的 Svelte 动画库，它把 React 生态中广受好评的动画能力带到了 Svelte 世界。无论是新手还是进阶用户，在编写动画时最先遇到的困惑往往就是transition属性的三种过渡类型：tween、spring 与 keyframes。本文将从源码角度拆解它们的运行机制与适用场景，帮你快速选出最合适的动画方案。
为什么需要理解 svelte-motion 的过渡类型
在 svelte-motion 中，动画通过transition属性驱动。如果你不指定任何过渡类型，库会依据属性的不同自动套用默认方案（见 default-transitions.js）：位置类属性x/y/z/rotate默认使用underDampedSpring，缩放scale默认使用criticallyDampedSpring，而opacity/color/backgroundColor则默认走 0.3 秒的线性 tween。理解这套默认规则，是掌握动画手感的第一步。
tween 过渡：匀速可控的经典选择
tween 即补间动画，它按照固定的时长与缓动函数，把数值从起点平滑地推进到终点。在 svelte-motion 内部，tween会被转换为keyframes类型处理（见 transitions.js 中convertTransitionToAnimationOptions），默认时长约 0.8 秒。
tween 最适合的场景：
- 需要精确控制时长与节奏的 UI 过渡
- 透明度、背景色等非物理属性变化
- 与用户操作节奏一致的淡入淡出效果
<Motion let:motion transition={{ opacity: { duration: 0.5, ease: "easeInOut" } }}> <div use:motion /> </Motion>spring 过渡：物理感十足的弹性动画
spring 模拟真实的弹簧物理运动，通过stiffness（刚度）、damping（阻尼）与mass（质量）三个参数控制弹性。它的最大优势是能自动衔接上一个动画的惯性速度，让连续交互显得自然流畅，这也是为什么位置与旋转属性默认使用 spring。
<Motion let:motion transition={{ x: { type: "spring", stiffness: 500, damping: 25 } }}> <div use:motion /> </Motion>源码中underDampedSpring采用stiffness: 500, damping: 25, restDelta: 0.5的配置，阻尼小于临界值，因此会产生轻微回弹的"果冻感"；而criticallyDampedSpring（stiffness: 550）阻尼恰好处于临界状态，运动干脆利落、不来回摆动，非常适合面板展开、卡片缩放等场景。
keyframes 过渡：多关键帧的连续动画
keyframes 允许你传入一个目标值数组，让动画按顺序经过多个中间状态。例如让元素沿 X 轴做"前进-回弹-到位"的位移，只需写出关键帧序列，svelte-motion 会自动分配每个阶段的时长与缓动。
<Motion let:motion animate={{ x: [0, 100, 50, 0] }}> <div use:motion /> </Motion>当动画目标是数组形式时，库会自动切换到 keyframes 处理（见getDefaultTransition中的isKeyframesTarget判断），无需手动声明类型，非常省心。
三种过渡类型如何选择：一张表看懂
| 过渡类型 | 核心参数 | 运动特征 | 推荐场景 |
|---|---|---|---|
| tween | duration、ease | 匀速可控、节奏明确 | 淡入淡出、颜色变化、菜单开关 |
| spring | stiffness、damping、mass | 物理弹性、惯性自然 | 拖拽、卡片弹跳、元素入场 |
| keyframes | 关键帧数组 | 多段连续、可编排 | 复杂路径动画、序列演出 |
快速判断口诀：要"感觉"选 spring，要"节奏"选 tween，要"编排"选 keyframes。
svelte-motion 默认过渡配置解读
想写出手感统一的动画，建议先了解库的默认行为。查看 default-transitions.js 可以发现：
- 位移与旋转 →
underDampedSpring（轻微回弹） - 缩放 →
criticallyDampedSpring（干脆不抖） - 透明度与颜色 →
linearTween（0.3 秒线性） - 其余未知属性 → 走
criticallyDampedSpring兜底
这意味着即便你完全不写 transition，svelte-motion 也能给出"位移有弹性、透明度均匀"的合理默认表现。
掌握 easing 缓动函数，让动画更高级
缓动函数决定了 tween 动画在时间轴上的快慢变化。svelte-motion 内置了丰富的缓动名称，定义在 easing.js：linear、easeIn、easeInOut、easeOut、circIn/Out、backIn/Out、anticipate、bounceIn/Out等，还支持传入四元数组自定义三次贝塞尔曲线：
<Motion let:motion transition={{ opacity: { duration: 0.4, ease: [0.42, 0, 0.58, 1] } }}> <div use:motion /> </Motion>backOut会产生轻微过头再回落的"橡皮筋"效果，bounceOut则是落地弹跳，非常适合吸引眼球的强调动画。
进阶技巧：用 animate 独立驱动动画
除了组件内的 transition，svelte-motion 还提供独立的animate函数（见 animate.js），可直接操作 MotionValue：
import { animate } from "svelte-motion"; const controls = animate(0, 100, { type: "spring", stiffness: 2000, onComplete: (v) => console.log("完成", v) }); // 随时停止 controls.stop();这种方式特别适合与滚动位置、鼠标坐标等外部数据联动，实现"数据驱动动画"。
总结：选对过渡类型，动画就成功了一半
tween 给你精确控制，spring 给你自然物理感，keyframes 给你编排自由。结合 svelte-motion 的默认配置与内置缓动函数，即使零基础也能快速做出专业水准的动画。建议动手写几个 demo 感受三种类型的差异，再根据交互反馈微调参数——毕竟动画的最终评判标准，永远是"看起来顺不顺眼"。
【免费下载链接】svelte-motionAn animation library for Svelte based on framer-motion.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-motion
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
