Motion Canvas 样条曲线绘制指南Spline 组件的最小 Knot 要求与手柄控制【免费下载链接】motion-canvasVisualize Your Ideas With Code项目地址: https://gitcode.com/gh_mirrors/mo/motion-canvas导读在 Motion Canvas 中Spline组件用于绘制一条平滑穿过多个点的曲线样条其每个点即 Knot结点既可以是自动计算手柄的简单坐标也可以是带有独立贝塞尔手柄的Knot子节点。本指南以spline-with-insufficient-knots警告日志为切入点系统讲解样条可见的最基本约束——至少需要两个 Knot并深入两种 Knot 定义方式points属性与Knot子组件的区别与手柄控制细节帮助你从源码层面理解自动手柄、smoothness与auto混合等机制在实际动画项目中正确、稳定地使用样条。最小 Knot 数量样条可见性的前提在motion-canvas/2d中样条是通过逐段贝塞尔曲线拼接而成的一条连续曲线。无论你采用哪种方式定义结点一条样条至少需要两个 Knot否则它不会有任何可见的绘制内容。这一约束不仅是使用层面的经验更是源码层面的硬性检查在 Spline.ts 的构造函数中当同时满足以下条件时会通过useLogger().warn()抛出带splineWithInsufficientKnots说明文案的警告children未定义、不是数组或数组长度小于 2points未定义、不是函数且长度小于 2spawner也未定义。在曲线剖面计算层getBezierSplineProfile.ts 同样有防御逻辑if (knots.length 2) return profile;——此时返回的剖面不含任何线段弧长为 0因此样条不会渲染出任何可见路径。也就是说Spline若想真正画得出来至少要提供两个有效的 Knot。这条规则同时适用于下面两种定义方式。方式一通过points属性自动计算手柄最简单的用法是直接给Spline传入坐标数组由组件自动为每个 Knot 计算贝塞尔手柄位置绘制出平滑曲线Spline stroke#fff lineWidth{8} points{[ [100, 0], [0, 0], [0, 100], ]} /这里points接收的是SignalValuePossibleVector2[]见 Spline.ts。当points存在时组件的knots()方法Spline.ts会将其映射为KnotInfo每个点的startHandle与endHandle都初始化为该点自身并把auto标记为{start: 1, end: 1}表示完全交给自动算法计算手柄。自动手柄的具体算法位于 getBezierSplineProfile.ts 的calculateSmoothHandles对每个 Knot结合其前后相邻两个 Knot 的位置计算平滑手柄方向再乘上smoothness作为缩放因子。因此smoothness只影响未显式指定手柄的 KnotSpline.ts默认值为0.4自动手柄曲线在每个 Knot 处保持 C1 连续切线方向连续从而形成视觉上平滑的整体曲线。提示points是响应式信号可以直接传函数或与其他信号组合实现曲线形状随动画动态变化。方式二通过Knot子组件精细控制手柄如果自动手柄无法满足需求例如需要制造尖角、非对称手柄或调整曲线张力可以改用Knot子节点作为样条的结点。Knot是Node的子类拥有完整的节点属性位置、变换等并额外提供startHandle与endHandle两个相对手柄属性Spline stroke#fff lineWidth{8} Knot x{100} endHandle{[-50, 0]} / Knot / Knot y{100} startHandle{[-100, 50]} / /Spline从 Knot.ts 的构造函数可以看到只要某个 Knot 未显式提供任何手柄startHandle与endHandle均为 undefined它就会自动进入auto: 1模式由样条为其计算平滑手柄反之只要提供了任一手柄就按用户定义绘制。手柄的语义Knot.tsstartHandle/endHandle位置相对于该 Knot 自身坐标即 Knot 为原点若只提供其一另一个默认取镜像位置flipped保证该点切线连续手柄长度越大曲线在该点附近的张力或弯曲程度越明显。混合模式auto属性Knot还提供了auto属性Knot.ts用于在用户手柄与自动平滑手柄之间插值混合。它支持三种写法{startHandle: n, endHandle: n}对象、单个数字同时作用于两端或[start, end]二元数组。默认值为0即完全使用用户手柄当auto: 1时完全使用自动算法。这一机制让你可以先用显式手柄勾勒大致轮廓再通过auto平滑过渡到完全平滑的形态。手柄只对样条本段生效注意一个细节Knot子节点方式下样条在收集结点时Spline.ts只读取knot.points()该信息包含位置、手柄与auto值Knot.ts。这意味着手柄只影响该 Knot 与相邻 Knot 之间的曲线段每段之间是否平滑取决于相邻 Knot 手柄是否对齐镜像/共线若手柄方向断裂不共线该处会形成折角此时若lineJoin为miterlineWidthCoefficient还会根据剖面的minSin放大描边宽度以避免尖角穿帮Spline.ts。两种定义方式的选择建议场景推荐方式理由快速绘制一条平滑的波浪线、折线过渡points属性零手柄心智负担自动平滑配合smoothness调节需要精确控制某一段的弯曲程度Knot子组件 显式手柄手柄相对 Knot 定位直观且可动画化需要半自动半手动的张力Knot子组件 auto混合在自动平滑与手工造型之间连续过渡相关能力样条也是 CurveSpline继承自抽象类CurveCurve.ts因此它天然支持曲线家族的全部特性可在样条上直接使用closed是否闭合首尾闭合时自动追加连接首尾的贝塞尔段见 getBezierSplineProfile.tsstart/end百分比与startOffset/endOffset像素裁剪曲线的可见范围常用于让样条绘制动画逐步显现startArrow/endArrow/arrowSize在端点绘制箭头lineWidth、stroke、lineCap、lineJoin等Shape通用样式属性。例如让样条从 0 生长到 100%Spline stroke#fff lineWidth{8} points{[[100, 0], [0, 0], [0, 100]]} start{0} end{0.5} /小结样条至少需要两个 Knot否则Spline构造函数会给出spline-with-insufficient-knots警告且曲线剖面getBezierSplineProfile直接返回空结果画面中不会出现任何路径。用points属性定义结点手柄由smoothness默认 0.4控制的算法自动生成适合快速绘制平滑曲线。用Knot子组件定义结点可通过startHandle/endHandle精确控制每个结点两侧的手柄并通过auto在手动与自动手柄之间混合实现从圆滑到尖锐的任意造型。掌握最小 Knot 约束与两种手柄控制方式后你就能在 Motion Canvas 中稳定、可控地绘制各种平滑曲线并将其与closed、start/end、箭头等Curve能力组合出丰富的动画效果。【免费下载链接】motion-canvasVisualize Your Ideas With Code项目地址: https://gitcode.com/gh_mirrors/mo/motion-canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考