ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

TiXL(t3)SampleCurve 算符实战指南:图形内嵌曲线编辑器与曲线采样

2026/9/20 15:38:42 拓冰建站 浏览量
TiXL(t3)SampleCurve 算符实战指南:图形内嵌曲线编辑器与曲线采样 音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载导读SampleCurve 是 TiXLt3开源实时动态图形软件中位于Lib.numbers.curve命名空间下的一个算符Operator它的核心价值是在节点图Graph内直接开辟一个内嵌的曲线编辑器窗口让你像编辑时间线动画曲线一样编辑一条可复用的曲线并实时将其采样为浮点数值供其他算符驱动。阅读本文后你将掌握 SampleCurve 的输入输出语义、完整的鼠标编辑操作、与 AnimValue 组合实现自动动画曲线的实战技巧以及其底层GetSampledValue采样与插值机制的源码级原理。一、SampleCurve 是什么根据 SampleCurve 官方文档 的定义SampleCurve 会在节点图的『graph』中创建一个窗口窗口内是一个仅包含单条曲线的曲线编辑器。这条曲线可以在『Parameters』视图中编辑编辑方式与标准时间线中的动画曲线完全一致。它是Lib.numbers.curve运算符库中的一员同库还包含 CurvesToTexture将曲线写入纹理完整目录见 Lib.numbers.curve 索引。从源码看SampleCurve 是InstanceSampleCurve的派生类定义于 Operators/Lib/Symbols/numbers/curve/SampleCurve.cs并配套有节点定义文件 SampleCurve.t3 与 UI 绑定文件 SampleCurve.t3ui。其 Graph 内嵌编辑器的绘制逻辑由 Editor/Gui/OpUis/UIs/SampleCurveUi.cs 实现。二、输入参数与输出2.1 输入参数名称相关性与类型说明CurveCurve曲线类型曲线输入 / 编辑器。直接在此编辑也可连接其他算符输出的Curve数据USingle Relevant单值相关控制水平轴的输入即采样位置。取值范围通常为 01对应曲线首个与末个关键帧的时间也支持越界值由曲线的 Pre/Post 越界策略决定行为2.2 输出名称类型ResultSystem.Singlefloat—— 曲线在 U 处的采样值CurveOutputT3.Core.DataTypes.Curve —— 当前曲线数据本身在源码 SampleCurve.cs 中可以看到两个输入槽的声明InputSlotCurve Curve与InputSlotfloat U分别对应 GUID108CB829-5F9E-4A45-BC6B-7CF40A0A0F89和2c24d4fe-6c96-4502-bf76-dac756a16215两个输出Slotfloat Result与SlotCurve CurveOutput同样以固定 GUID 注册。这些 GUID 在 SampleCurve.t3ui 中被[BindInput]/[BindOutput]特性一一对应绑定从而将节点图 UI 与运行时算符实例连接起来。三、曲线编辑器的完整鼠标操作官方文档列出了曲线编辑器内的全部鼠标操作现结合编辑器 UI 实现逐条说明左键单击选中曲线上的点关键帧。左键拖拽移动选中点及其 Bezier 控制点实时调整曲线形状与切线。左键 Alt在曲线上创建新点新增关键帧。右键单击弹出选项菜单包含额外的插值方式Constant / Linear / Bezier / Spline等设置。右键拖拽在曲线编辑器内部平移视图Pan。点击左上角图标将曲线在更大的窗口中打开方便精细编辑。其中「左上角图标」对应 SampleCurveUi.cs 中调用的CurveEditPopup.DrawPopupIndicator(...)——当窗口高度足够时大于ImGui.GetFrameHeight() * UiScaleFactor * 2会显示弹出指示图标点击后进入放大版曲线编辑弹窗。3.1 一个容易被忽略的 UI 细节防滑拖拽手柄官方文档特别提示在节点图中选择、移动这个算符有时会比较困难。原因在于该算符的主体几乎全被曲线编辑器占据鼠标落在曲线上会优先触发曲线编辑交互。为此SampleCurveUi.cs 在编辑器左侧绘制了一个WidgetElements.DrawOperatorDragHandle(...)拖拽手柄官方文档戏称其带『防滑涂层』这一小块区域是专门用来选中与移动整个算符的。同时编辑器默认只在按住Ctrl时才允许鼠标编辑曲线见preventEditingUnlessCtrlPressed逻辑这也进一步减少了误触。四、实战技巧用 AnimValue 驱动 U 输入官方文档给出的 ProTip 是 SampleCurve 最常用的高级玩法ProTip如果 [AnimValue] 的result输出连接到 SampleCurve 的 U 输入你就得到了一条易于编辑的、自动动画的曲线并且附带大量可选项。原理拆解AnimValue 是 TiXL 中与 BPM 同步的动画值生成器位于Lib.numbers.anim.animators.AnimValue内置 Saws、Sine、Noise 等多种动画样式按住 Ctrl 拖拽可调整形状。它可以在运行期间持续输出随时间变化的浮点值。将 AnimValue 的result接到 SampleCurve 的U输入后SampleCurve 会以该动态值为采样横坐标沿你手工绘制的曲线取到对应的纵坐标值再从Result输出。于是曲线的形状变成了一个可自由塑形的『响应函数』AnimValue 负责产生周期性或随机性的输入曲线负责把它映射成你想要的输出波形。例如把 AnimValue 设为循环锯齿波、曲线设为缓入缓出形状即可得到平滑往复的动画值。在 SampleCurveUi.cs 中编辑器还会在 U 当前值对应的横坐标位置绘制一条垂直的采样指示线DrawSamplePointIndicator让你直观看到此刻曲线被采样到了哪里。这套『动画值 曲线重映射』的组合也被大量使用在 TiXL 内置示例与官方教程中参见 Introduction.md 对 AnimValue 结合采样操作的介绍。五、源码级原理Result 是怎么算出来的5.1 算符的更新流程SampleCurve.cs 的Update方法实现了完整的采样管线Result.UpdateAction Update; CurveOutput.UpdateAction Update;两个输出槽共用同一个更新回调。每次求值时若Curve输入为空则直接返回读取U与Curve的值将曲线原样透传给CurveOutput调用c.GetSampledValue(u)得到采样结果写入Result清除两个输出槽的脏标记DirtyFlag完成本次求值。5.2 Curve.GetSampledValue 的插值决策真正执行数学计算的是 Core/DataTypes/Curve.cs 中的Curve.GetSampledValue(double u)其算法要点如下对u做 4 位小数精度取整TimePrecision 4避免浮点抖动当u小于首个关键帧时间或大于末个关键帧时间时调用PreCurveMapper/PostCurveMapper进行越界映射即曲线的 Pre/Post 越界策略如 Constant 钳制、循环等映射会同时返回新的mappedU和一个offset偏移量在区间内部根据相邻两个关键帧VDefinition的插值类型在四种插值器中择一计算ConstantOutInterpolation Constant→ConstInterpolator.InterpolateLinear两侧均为Linear→LinearInterpolator.InterpolateBezierBezierInterpolator.SegmentNeedsBezier判定为真→BezierInterpolator.Interpolate其余情况 →SplineInterpolator.Interpolate5.3 默认曲线开箱即用的线性斜坡SampleCurve.t3 中记录了该算符的默认 Curve 输入值包含两个关键帧——Time0, Value0与Time1, Value≈1两者的InInterpolation/OutInterpolation均为LinearPreCurve/PostCurve越界策略均为Constant。也就是说新拖入的 SampleCurve 默认就是一条从 0 到 1 的线性斜坡U 输入 0 时 Result 输出 0U 输入 1 时 Result 输出 1越界时钳制在端点值——非常适合直接作为归一化控制信号使用。六、编辑曲线时发生了什么UI 与数据同步在 Parameters 视图中编辑曲线时SampleCurveUi.cs 的工作流程如下判断Curve输入是否连接了外部数据若没有连接Input.IsDefault则编辑操作会先clone一份曲线副本cloneIfModified保证不污染默认值通过CurveInputEditing.DrawCanvasForCurve(...)绘制可交互的曲线画布接收鼠标拖拽、Alt左键加点等编辑输入当检测到修改标记InputEditStateFlags.Modified时将编辑后的曲线写回输入槽SetTypedInputValue并分别对Result与CurveOutput调用DirtyFlag.Invalidate()/ForceInvalidate()强制下游在下一帧重新求值。这套机制保证了你每拖一下贝塞尔手柄Result 与 CurveOutput 都会在下一次求值时立即反映最新曲线实现所见即所得的实时预览。七、典型使用链路小结将以上内容串起来SampleCurve 最典型的三种用法是静态重映射U 接入固定值如 0.5Result 输出曲线在中点的值用于在两张纹理/两种颜色之间插值动态动画U 接入 AnimValue 等 BPM 同步动画值Result 输出循环动画数值驱动位置、缩放、透明度等任何接受浮点输入的参数曲线透传将 CurveOutput 连接到其他接受T3.Core.DataTypes.Curve数据的算符例如 CurvesToTexture 将曲线写入纹理实现曲线的渲染与复用。由于 SampleCurve 的输入输出类型明确float与Curve它也是学习 TiXL 自定义算符输入输出约定InputSlotT/SlotT与固定 GUID 注册机制的极佳入门样例——完整定义可对照 SampleCurve.cs 与 Curve.cs 阅读。赞分享音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载相关推荐TiXL 时间线内联曲线展开DopeSheet Curve Expand完全指南不离开时间线即可逐参数编辑动画曲线TiXL 时间线内联曲线展开DopeSheet Curve Expand完全指南不离开时间线即可逐参数编辑动画曲线 TiXL 的 Timeline 窗口在音视频图形学桌面应用CoastSat终极安装教程从零开始搭建卫星海岸线分析平台CoastSat终极安装教程从零开始搭建卫星海岸线分析平台 想要快速掌握全球海岸线监测技术吗CoastSat作为一款强大的卫星海岸线分析工具让你能够从卫星图像处理GIS数据分析科研TiXL 时间轴动画区域Animation Area深度解析Timeline 内嵌曲线编辑器与数据剪辑编辑面板TiXL 时间轴动画区域Animation Area深度解析Timeline 内嵌曲线编辑器与数据剪辑编辑面板 TiXLtooll3的 Timelin音视频图形学桌面应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考