触发方式
列表中指针进入预览区域后播放，按配置的循环选项重复，离开即停止；详情中自动播放加载效果；播放期间按钮显示暂停，暂停后保留当前画面，再次播放从暂停处继续。 详情页自动按配置播放完整周期；暂停保持当前画面，继续从同一进度接续，不反向返回。
起点与终点
手指 1的旋转角度：10 → 10（含 4 个关键帧）；手指 1的缩放：0.4 → 0.4；手指 2的旋转角度：10 → 10（含 5 个关键帧）；手指 2的缩放：0.6 → 0.6；手指 3的旋转角度：10 → 10（含 5 个关键帧）；手指 3的缩放：0.8 → 0.8；手指 4的旋转角度：10 → 10（含 5 个关键帧）；手指 4的缩放：1 → 1；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。
时序
总时长 1200 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0.42, 0, 0.58, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。
进入与退出
四指在同一周期内错峰敲击，手掌和拇指保持不动。暂停保留当前角度，再次播放接续当前周期。按配置持续重复整个敲击周期。
重复操作与打断
暂停保持当前周期进度，继续接续；修改参数时按新配置从完整周期起点重播，不排队。
减少动态效果
遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。
默认配置
这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "finger-tap",
"durationMs": 1200,
"delayMs": 0,
"easing": [
0.42,
0,
0.58,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": true,
"interruption": "retarget",
"tracks": [
{
"part": "finger0",
"property": "rotate",
"values": [
10,
50,
10,
10
],
"times": [
0,
0.4,
0.5,
1
],
"start": 0,
"span": 1
},
{
"part": "finger0",
"property": "scale",
"values": [
0.4,
0.4
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "finger1",
"property": "rotate",
"values": [
10,
10,
50,
10,
10
],
"times": [
0,
0.08333333333333333,
0.48333333333333334,
0.5833333333333334,
1
],
"start": 0,
"span": 1
},
{
"part": "finger1",
"property": "scale",
"values": [
0.6,
0.6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "finger2",
"property": "rotate",
"values": [
10,
10,
50,
10,
10
],
"times": [
0,
0.16666666666666666,
0.5666666666666667,
0.6666666666666666,
1
],
"start": 0,
"span": 1
},
{
"part": "finger2",
"property": "scale",
"values": [
0.8,
0.8
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "finger3",
"property": "rotate",
"values": [
10,
10,
50,
10,
10
],
"times": [
0,
0.25,
0.65,
0.75,
1
],
"start": 0,
"span": 1
},
{
"part": "finger3",
"property": "scale",
"values": [
1,
1
],
"times": [
0,
1
],
"start": 0,
"span": 1
}
]
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：Uiverse.io · Pradeepsaranbishnoi. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。