触发方式

列表中指针进入预览区域后播放,按配置的循环选项重复,离开即停止;详情中自动播放加载效果;播放期间按钮显示暂停,暂停后保留当前画面,再次播放从暂停处继续。 详情页自动按配置播放完整周期;暂停保持当前画面,继续从同一进度接续,不反向返回。

起点与终点

主体的缩放: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. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。