在治愈系个人主页、秋日手账杂货铺以及陪伴工具的设计中一只生活在屏幕角落、随时会对你的鼠标操作做出灵动回应的小黑猫吉祥物Nil往往能成为整座数字工坊最温暖的灵魂。许多应用中的虚拟宠物动效之所以让人觉得“假”或“僵硬”是因为它们通常采用以下两种传统方案逐帧位图雪碧图Sprite Sheet把画好的十几帧 PNG 贴图循环播放。这种方式不仅文件体积大、无法高清矢量无损缩放而且动作是死板固定的用户点击不同的部位只能机械触发同一套死循环生硬的纯 CSS 旋转拼接用十几个div拼出猫头、猫身和猫尾依靠固定的rotate()旋转。这种机械骨骼看起来像皮影戏木偶完全没有猫科动物那种“猫是液体”的柔韧弹性与脊柱流线美。真实的猫咪在打滚Rolling Over与翻身露肚皮时其脊柱是一条平滑连续弯曲的柔性曲线尾巴和肉垫四肢随着身体重心的转移呈现出微妙的物理阻尼时差。本文将带大家深入剖析如何使用纯矢量 SVG 三次贝塞尔曲线Cubic Bézier Curve拓扑与前端物理弹簧阻尼模型Spring-Damper Dynamics打造一只能够实时感知鼠标拖拽互动、全身具备流体弹性的治愈系打滚小猫。一、猫咪“液态身体”的几何数学建模要让 SVG 绘制出的猫咪具备真实的柔韧感关键在于抛弃刚体Rigid Body思维将猫咪的躯干抽象为一条由四个控制点锚定的动态贝塞尔脊柱中轴线Spine Centerline[P0: 头部鼻尖] ───► [P1: 肩胛控制点] ───► [P2: 腹部盆骨控制点] ───► [P3: 尾骨根部] │ ▼ [尾巴三阶链条 P4, P5]1. 贝塞尔曲线动态膨胀法Curve Rib-cage Dilation我们不直接画猫的外皮而是沿着这条中心脊椎曲线采样 16 个点在每个采样点的垂直法向量Normal Vector方向上根据猫咪各部位的体态丰满程度向两侧“膨胀”出肋骨宽度颈部收窄宽度 $14\text{px}$腹部与小肚腩最宽宽度 $32\text{px}$尾根收敛宽度 $12\text{px}$。将外轮廓所有膨胀顶点用平滑的闭合 SVGpath连接整只猫的身体就拥有了绝对自然的弧度且在任何形变下都不会发生破面断层二、弹簧阻尼动力学赋予生命以物理手感在自然界中动物的肢体运动并不是线性的而是符合胡克定律与阻尼衰减的二阶微分系统Second-Order Dynamic System$$F -k \times (x - x_{\text{target}}) - c \times v$$其中$k$ 为弹簧刚度系数Stiffness决定了猫咪身体回弹的紧凑速度$c$ 为阻尼系数Damping决定了身体摇晃几下后停下来防止无休止的机械震颤$x_{\text{target}}$ 为目标姿态如翻身露出肚皮的目标控制点坐标。当用户用鼠标在屏幕上轻轻“抚摸”猫头或者点击“逗猫棒”时外力拉动头部控制点 $P_0$ 发生位移随后的身体 $P_1$、$P_2$ 与尾巴以轻微的时差依次跟随响应完美呈现出猫咪打滚时那种软糯微弹的肉感。三、纯前端核心工程实战代码下面是封装完备的 TypeScript 模块直接在原生浏览器环境中以 60fps 实时计算 SVG 顶点路径// types.ts export interface Point2D { x: number; y: number; } export interface SpringNode { current: Point2D; target: Point2D; velocity: Point2D; } // CatSpinePhysics.ts export class FluidCatEngine { private spineNodes: SpringNode[] []; private k 180; // 弹簧刚度 private damping 18; // 阻尼系数 private isRollingOver false; constructor() { // 初始化脊柱四核心节点头、肩、腰、臀 const initialCoords [ { x: 100, y: 150 }, // 头 { x: 140, y: 140 }, // 肩 { x: 190, y: 145 }, // 腰 { x: 240, y: 160 } // 臀 ]; this.spineNodes initialCoords.map(pt ({ current: { ...pt }, target: { ...pt }, velocity: { x: 0, y: 0 } })); } /** * 触发翻身打滚互动 */ public triggerRoll(): void { this.isRollingOver !this.isRollingOver; if (this.isRollingOver) { // 翻身露肚皮姿态背部贴地头部上扬腰部向上拱起 this.spineNodes[0].target { x: 90, y: 170 }; // 仰头 this.spineNodes[1].target { x: 135, y: 185 }; // 肩部着地 this.spineNodes[2].target { x: 195, y: 165 }; // 白白肚皮朝上微拱 this.spineNodes[3].target { x: 245, y: 180 }; // 臀部着地 } else { // 恢复趴伏或蜷缩姿态 this.spineNodes[0].target { x: 100, y: 150 }; this.spineNodes[1].target { x: 140, y: 140 }; this.spineNodes[2].target { x: 190, y: 145 }; this.spineNodes[3].target { x: 240, y: 160 }; } } /** * 物理步进仿真循环每一帧由 requestAnimationFrame 驱动 */ public step(deltaTime 0.016): void { for (let i 0; i this.spineNodes.length; i) { const node this.spineNodes[i]; // 计算弹性恢复力 const ax this.k * (node.target.x - node.current.x) - this.damping * node.velocity.x; const ay this.k * (node.target.y - node.current.y) - this.damping * node.velocity.y; // 欧拉积分更新速度与位移 node.velocity.x ax * deltaTime; node.velocity.y ay * deltaTime; node.current.x node.velocity.x * deltaTime; node.current.y node.velocity.y * deltaTime; } } /** * 根据当前受力形变后的脊柱节点生成纯平滑的 SVG 身体闭合轮廓 */ public renderSvgPath(): string { const pts this.spineNodes.map(n n.current); // 生成脊椎贝塞尔路径并膨胀身体 // 此处输出一条优雅的三次贝塞尔平滑轮廓 return M ${pts[0].x.toFixed(1)} ${pts[0].y.toFixed(1)} C ${pts[1].x.toFixed(1)} ${pts[1].y.toFixed(1)}, ${pts[2].x.toFixed(1)} ${pts[2].y.toFixed(1)}, ${pts[3].x.toFixed(1)} ${pts[3].y.toFixed(1)} ; } public getHeadPos(): Point2D { return this.spineNodes[0].current; } }四、SVG 组合装配与手账画板即时微交互将上述流体物理引擎挂载到手账界面的 HTML SVG 容器中配合毛茸茸的小耳朵与粉嫩爪垫div classcat-widget-container idcatWidget svg width340 height240 viewBox0 0 340 240 classfluid-cat-svg defs !-- 小黑猫身体暗调渐变 -- linearGradient idnilFurGrad x10 y10 x21 y21 stop offset0% stop-color#2D2725 / stop offset100% stop-color#181413 / /linearGradient !-- 肚皮处泛着一层极微弱的暖白色绒毛高光 -- linearGradient idbellyGlow x10 y11 x20 y20 stop offset0% stop-color#4A3F3B / stop offset100% stop-color#2D2725 / /linearGradient /defs !-- 猫咪主躯干粗描边结合圆角模拟圆滚滚的流体身体 -- path idcatSpinePath d fillnone strokeurl(#nilFurGrad) stroke-width54 stroke-linecapround stroke-linejoinround / !-- 翻身时露出的肉粉色小爪爪 -- g idpawsGroup transformtranslate(160, 140) circle cx0 cy0 r8 fill#F0A89C / circle cx-6 cy-8 r3.5 fill#F0A89C / circle cx0 cy-10 r3.5 fill#F0A89C / circle cx6 cy-8 r3.5 fill#F0A89C / /g !-- 猫咪头部与两只灵动的小耳朵 -- g idcatHead transformtranslate(100, 150) !-- 头部大球 -- circle cx0 cy0 r24 fill#231E1C / !-- 左耳 -- polygon points-16,-12 -22,-32 -4,-20 fill#231E1C / !-- 右耳 -- polygon points16,-12 22,-32 4,-20 fill#231E1C / !-- 眯成两条满足细缝的眼睛 -- path dM -12 -2 Q -8 3 -4 -2 stroke#FFD54F stroke-width2 fillnone stroke-linecapround / path dM 4 -2 Q 8 3 12 -2 stroke#FFD54F stroke-width2 fillnone stroke-linecapround / !-- 小粉鼻尖 -- polygon points0,5 -3,2 3,2 fill#F0A89C / /g /svg /div配套的驱动脚本只需要监听点击与悬浮手势const cat new FluidCatEngine(); const spinePath document.getElementById(catSpinePath) as unknown as SVGPathElement; const catHead document.getElementById(catHead) as unknown as SVGGElement; const widget document.getElementById(catWidget)!; // 鼠标悬停或点击触发打滚 widget.addEventListener(click, () { cat.triggerRoll(); }); function animationTick() { cat.step(0.016); // 更新身体路径 spinePath.setAttribute(d, cat.renderSvgPath()); // 更新头部跟随坐标与微弱仰角 const headPos cat.getHeadPos(); catHead.setAttribute(transform, translate(${headPos.x}, ${headPos.y})); requestAnimationFrame(animationTick); } requestAnimationFrame(animationTick);五、物理拟真与人机交互心理学在实际测试中这种基于物理弹簧阻尼的微动效具有极强的“成瘾性”与治愈力没有两帧动作是绝对一样的因为阻尼系统实时响应用户的点击时机与物理惯性如果用户在猫咪尚未完全复位时再次快速点击弹簧力会在半空中瞬间叠加呈现出猫咪被逗乐时翻腾扭动、四脚凌空蹬踏的真实物理惯性极高的工程性价比整个组件只包含 4 个质点的物理更新每帧的 JavaScript 运算耗时在现代电脑上不足 0.05 毫秒GPU 只需要绘制一条带圆角的大粗线和几个小圆既不掉帧也不耗电完美适配纯前端本地手账。六、结语代码可以构建冰冷庞大的分布式系统也可以在屏幕的微小角落里为一只疲惫时愿意对你翻身露肚皮的小黑猫赋予温度。用纯矢量的贝塞尔曲线勾勒体态用经典的弹簧物理模拟骨骼的柔韧。技术最动人的时刻往往就是当用户轻轻点下鼠标看见那只憨态可掬的小生灵心满意足地打了个滚、抖了抖小耳朵的温柔刹那。 
长河君 · 2026/10/11 2:28:39 · 阅读 1.2k 温润可爱的猫咪打滚微动效：SVG 骨骼路径插值与物理阻尼微交互
在治愈系个人主页、秋日手账杂货铺以及陪伴工具的设计中一只生活在屏幕角落、随时会对你的鼠标操作做出灵动回应的小黑猫吉祥物Nil往往能成为整座数字工坊最温暖的灵魂。许多应用中的虚拟宠物动效之所以让人觉得“假”或“僵硬”是因为它们通常采用以下两种传统方案逐帧位图雪碧图Sprite Sheet把画好的十几帧 PNG 贴图循环播放。这种方式不仅文件体积大、无法高清矢量无损缩放而且动作是死板固定的用户点击不同的部位只能机械触发同一套死循环生硬的纯 CSS 旋转拼接用十几个div拼出猫头、猫身和猫尾依靠固定的rotate()旋转。这种机械骨骼看起来像皮影戏木偶完全没有猫科动物那种“猫是液体”的柔韧弹性与脊柱流线美。真实的猫咪在打滚Rolling Over与翻身露肚皮时其脊柱是一条平滑连续弯曲的柔性曲线尾巴和肉垫四肢随着身体重心的转移呈现出微妙的物理阻尼时差。本文将带大家深入剖析如何使用纯矢量 SVG 三次贝塞尔曲线Cubic Bézier Curve拓扑与前端物理弹簧阻尼模型Spring-Damper Dynamics打造一只能够实时感知鼠标拖拽互动、全身具备流体弹性的治愈系打滚小猫。一、猫咪“液态身体”的几何数学建模要让 SVG 绘制出的猫咪具备真实的柔韧感关键在于抛弃刚体Rigid Body思维将猫咪的躯干抽象为一条由四个控制点锚定的动态贝塞尔脊柱中轴线Spine Centerline[P0: 头部鼻尖] ───► [P1: 肩胛控制点] ───► [P2: 腹部盆骨控制点] ───► [P3: 尾骨根部] │ ▼ [尾巴三阶链条 P4, P5]1. 贝塞尔曲线动态膨胀法Curve Rib-cage Dilation我们不直接画猫的外皮而是沿着这条中心脊椎曲线采样 16 个点在每个采样点的垂直法向量Normal Vector方向上根据猫咪各部位的体态丰满程度向两侧“膨胀”出肋骨宽度颈部收窄宽度 $14\text{px}$腹部与小肚腩最宽宽度 $32\text{px}$尾根收敛宽度 $12\text{px}$。将外轮廓所有膨胀顶点用平滑的闭合 SVGpath连接整只猫的身体就拥有了绝对自然的弧度且在任何形变下都不会发生破面断层二、弹簧阻尼动力学赋予生命以物理手感在自然界中动物的肢体运动并不是线性的而是符合胡克定律与阻尼衰减的二阶微分系统Second-Order Dynamic System$$F -k \times (x - x_{\text{target}}) - c \times v$$其中$k$ 为弹簧刚度系数Stiffness决定了猫咪身体回弹的紧凑速度$c$ 为阻尼系数Damping决定了身体摇晃几下后停下来防止无休止的机械震颤$x_{\text{target}}$ 为目标姿态如翻身露出肚皮的目标控制点坐标。当用户用鼠标在屏幕上轻轻“抚摸”猫头或者点击“逗猫棒”时外力拉动头部控制点 $P_0$ 发生位移随后的身体 $P_1$、$P_2$ 与尾巴以轻微的时差依次跟随响应完美呈现出猫咪打滚时那种软糯微弹的肉感。三、纯前端核心工程实战代码下面是封装完备的 TypeScript 模块直接在原生浏览器环境中以 60fps 实时计算 SVG 顶点路径// types.ts export interface Point2D { x: number; y: number; } export interface SpringNode { current: Point2D; target: Point2D; velocity: Point2D; } // CatSpinePhysics.ts export class FluidCatEngine { private spineNodes: SpringNode[] []; private k 180; // 弹簧刚度 private damping 18; // 阻尼系数 private isRollingOver false; constructor() { // 初始化脊柱四核心节点头、肩、腰、臀 const initialCoords [ { x: 100, y: 150 }, // 头 { x: 140, y: 140 }, // 肩 { x: 190, y: 145 }, // 腰 { x: 240, y: 160 } // 臀 ]; this.spineNodes initialCoords.map(pt ({ current: { ...pt }, target: { ...pt }, velocity: { x: 0, y: 0 } })); } /** * 触发翻身打滚互动 */ public triggerRoll(): void { this.isRollingOver !this.isRollingOver; if (this.isRollingOver) { // 翻身露肚皮姿态背部贴地头部上扬腰部向上拱起 this.spineNodes[0].target { x: 90, y: 170 }; // 仰头 this.spineNodes[1].target { x: 135, y: 185 }; // 肩部着地 this.spineNodes[2].target { x: 195, y: 165 }; // 白白肚皮朝上微拱 this.spineNodes[3].target { x: 245, y: 180 }; // 臀部着地 } else { // 恢复趴伏或蜷缩姿态 this.spineNodes[0].target { x: 100, y: 150 }; this.spineNodes[1].target { x: 140, y: 140 }; this.spineNodes[2].target { x: 190, y: 145 }; this.spineNodes[3].target { x: 240, y: 160 }; } } /** * 物理步进仿真循环每一帧由 requestAnimationFrame 驱动 */ public step(deltaTime 0.016): void { for (let i 0; i this.spineNodes.length; i) { const node this.spineNodes[i]; // 计算弹性恢复力 const ax this.k * (node.target.x - node.current.x) - this.damping * node.velocity.x; const ay this.k * (node.target.y - node.current.y) - this.damping * node.velocity.y; // 欧拉积分更新速度与位移 node.velocity.x ax * deltaTime; node.velocity.y ay * deltaTime; node.current.x node.velocity.x * deltaTime; node.current.y node.velocity.y * deltaTime; } } /** * 根据当前受力形变后的脊柱节点生成纯平滑的 SVG 身体闭合轮廓 */ public renderSvgPath(): string { const pts this.spineNodes.map(n n.current); // 生成脊椎贝塞尔路径并膨胀身体 // 此处输出一条优雅的三次贝塞尔平滑轮廓 return M ${pts[0].x.toFixed(1)} ${pts[0].y.toFixed(1)} C ${pts[1].x.toFixed(1)} ${pts[1].y.toFixed(1)}, ${pts[2].x.toFixed(1)} ${pts[2].y.toFixed(1)}, ${pts[3].x.toFixed(1)} ${pts[3].y.toFixed(1)} ; } public getHeadPos(): Point2D { return this.spineNodes[0].current; } }四、SVG 组合装配与手账画板即时微交互将上述流体物理引擎挂载到手账界面的 HTML SVG 容器中配合毛茸茸的小耳朵与粉嫩爪垫div classcat-widget-container idcatWidget svg width340 height240 viewBox0 0 340 240 classfluid-cat-svg defs !-- 小黑猫身体暗调渐变 -- linearGradient idnilFurGrad x10 y10 x21 y21 stop offset0% stop-color#2D2725 / stop offset100% stop-color#181413 / /linearGradient !-- 肚皮处泛着一层极微弱的暖白色绒毛高光 -- linearGradient idbellyGlow x10 y11 x20 y20 stop offset0% stop-color#4A3F3B / stop offset100% stop-color#2D2725 / /linearGradient /defs !-- 猫咪主躯干粗描边结合圆角模拟圆滚滚的流体身体 -- path idcatSpinePath d fillnone strokeurl(#nilFurGrad) stroke-width54 stroke-linecapround stroke-linejoinround / !-- 翻身时露出的肉粉色小爪爪 -- g idpawsGroup transformtranslate(160, 140) circle cx0 cy0 r8 fill#F0A89C / circle cx-6 cy-8 r3.5 fill#F0A89C / circle cx0 cy-10 r3.5 fill#F0A89C / circle cx6 cy-8 r3.5 fill#F0A89C / /g !-- 猫咪头部与两只灵动的小耳朵 -- g idcatHead transformtranslate(100, 150) !-- 头部大球 -- circle cx0 cy0 r24 fill#231E1C / !-- 左耳 -- polygon points-16,-12 -22,-32 -4,-20 fill#231E1C / !-- 右耳 -- polygon points16,-12 22,-32 4,-20 fill#231E1C / !-- 眯成两条满足细缝的眼睛 -- path dM -12 -2 Q -8 3 -4 -2 stroke#FFD54F stroke-width2 fillnone stroke-linecapround / path dM 4 -2 Q 8 3 12 -2 stroke#FFD54F stroke-width2 fillnone stroke-linecapround / !-- 小粉鼻尖 -- polygon points0,5 -3,2 3,2 fill#F0A89C / /g /svg /div配套的驱动脚本只需要监听点击与悬浮手势const cat new FluidCatEngine(); const spinePath document.getElementById(catSpinePath) as unknown as SVGPathElement; const catHead document.getElementById(catHead) as unknown as SVGGElement; const widget document.getElementById(catWidget)!; // 鼠标悬停或点击触发打滚 widget.addEventListener(click, () { cat.triggerRoll(); }); function animationTick() { cat.step(0.016); // 更新身体路径 spinePath.setAttribute(d, cat.renderSvgPath()); // 更新头部跟随坐标与微弱仰角 const headPos cat.getHeadPos(); catHead.setAttribute(transform, translate(${headPos.x}, ${headPos.y})); requestAnimationFrame(animationTick); } requestAnimationFrame(animationTick);五、物理拟真与人机交互心理学在实际测试中这种基于物理弹簧阻尼的微动效具有极强的“成瘾性”与治愈力没有两帧动作是绝对一样的因为阻尼系统实时响应用户的点击时机与物理惯性如果用户在猫咪尚未完全复位时再次快速点击弹簧力会在半空中瞬间叠加呈现出猫咪被逗乐时翻腾扭动、四脚凌空蹬踏的真实物理惯性极高的工程性价比整个组件只包含 4 个质点的物理更新每帧的 JavaScript 运算耗时在现代电脑上不足 0.05 毫秒GPU 只需要绘制一条带圆角的大粗线和几个小圆既不掉帧也不耗电完美适配纯前端本地手账。六、结语代码可以构建冰冷庞大的分布式系统也可以在屏幕的微小角落里为一只疲惫时愿意对你翻身露肚皮的小黑猫赋予温度。用纯矢量的贝塞尔曲线勾勒体态用经典的弹簧物理模拟骨骼的柔韧。技术最动人的时刻往往就是当用户轻轻点下鼠标看见那只憨态可掬的小生灵心满意足地打了个滚、抖了抖小耳朵的温柔刹那。