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