触发方式

在上方输入框输入、点击定位或用方向键移动光标;下方是普通光标对照。刚度越大跟随越快,阻尼越大回弹越少,质量越大惯性越明显。字号、输入宽度和密码类型同时改变真实输入与光标测量。目录悬停、聚焦和手机 Preview 共用演示,标题进入编辑器。

参数与内容

平滑输入占位文字: "smooth input";普通输入占位文字: "normal input";默认文字: "";输入类型: "text";文字大小: 24;输入框宽度: 420;弹簧刚度: 500;阻尼: 30;质量: 0.5;背景颜色: "#f5f4f3";输入背景: "#fcfcfc";文字颜色: "#121212"

起点与终点

初始画面使用以上保存内容。逻辑画布 520 × 360,整体缩放 1,位置偏移 (0, 0)。

时序

光标时序由刚度 500、阻尼 30 和质量 0.5 决定;演示延迟 0 ms。通用时长字段不控制此物理弹簧。

进入与退出

弹簧光标跟随原生文本选区,保留标准输入作对照。 演示停止后保留组件的当前交互状态。

重复操作与打断

离开目录且失焦、滚出可视区和切换后台会停止演示。实际输入、当前选择与播放进度不覆盖保存的默认值。

参数与导出

控件、预览、JSON、Motion 适配器、复刻工程和 HTML 导出共用同一设置对象与渲染器。目录卡片始终显示项目默认预设。

减少动态效果

不自动演示,过渡直接呈现目标状态;保留真实输入、按钮、选择和键盘操作。

默认配置

这些数值来自当前维护的默认配置;编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "skiper-106",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "skiper": {
    "placeholder": "smooth input",
    "comparisonPlaceholder": "normal input",
    "initialValue": "",
    "inputType": "text",
    "fontSize": 24,
    "fieldWidth": 420,
    "stiffness": 500,
    "damping": 30,
    "mass": 0.5,
    "background": "#f5f4f3",
    "fieldBackground": "#fcfcfc",
    "textColor": "#121212"
  }
}

参考来源与复用

此效果参考 Skiper UI;可用的公开源码已经核对,Pro 项目依据公开演示独立实现。可在编辑器导出当前配置与可运行渲染器,复用时保留 Skiper UI 署名及素材来源。

用于自己的项目

进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。

目录来源标注:Skiper UI. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。