触发方式
列表中指针进入预览区域后播放，按配置的循环选项重复，离开即停止；详情中自动播放加载效果；播放期间按钮显示暂停，暂停后保留当前画面，再次播放从暂停处继续。 详情页自动按配置播放完整周期；暂停保持当前画面，继续从同一进度接续，不反向返回。
起点与终点
圆点 1的纵向位移：0 → 0（含 4 个关键帧）；圆点 1的不透明度：0.4 → 0.4（含 4 个关键帧）；圆点 2的纵向位移：0 → 0（含 4 个关键帧）；圆点 2的不透明度：0.4 → 0.4（含 4 个关键帧）；圆点 3的纵向位移：0 → 0（含 4 个关键帧）；圆点 3的不透明度：0.4 → 0.4（含 4 个关键帧）；整体的横向位移：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": "dots",
"durationMs": 1200,
"delayMs": 0,
"easing": [
0.42,
0,
0.58,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": true,
"interruption": "retarget",
"tracks": [
{
"part": "dot0",
"property": "y",
"values": [
0,
-4,
0,
0
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0,
"span": 0.75
},
{
"part": "dot0",
"property": "opacity",
"values": [
0.4,
1,
0.4,
0.4
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0,
"span": 0.75
},
{
"part": "dot1",
"property": "y",
"values": [
0,
-4,
0,
0
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0.125,
"span": 0.75
},
{
"part": "dot1",
"property": "opacity",
"values": [
0.4,
1,
0.4,
0.4
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0.125,
"span": 0.75
},
{
"part": "dot2",
"property": "y",
"values": [
0,
-4,
0,
0
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0.25,
"span": 0.75
},
{
"part": "dot2",
"property": "opacity",
"values": [
0.4,
1,
0.4,
0.4
],
"times": [
0,
0.3,
0.6,
1
],
"start": 0.25,
"span": 0.75
}
]
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：Ariadne. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。