交互式词条

帧率（FPS）

帧率（FPS）用于帮助识别卡顿来源并选择更稳的实现方式。

入场与退场编排与时间位移与变换状态过渡

已完成

当前词条

预览、参数和导出

帧率（FPS）用于帮助识别卡顿来源并选择更稳的实现方式。

帧率（FPS）是「性能」中的核心词条，用来帮助识别卡顿来源并选择更稳的实现方式。

浏览分类

Frame rate (FPS)

时长420ms

位移28px

延迟0ms

曲线soft

.motion-card {
  animation-name: motion-frame-rate;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-frame-rate {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-frame-rate-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-frame-rate-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent Prompt

为界面片段使用「帧率（FPS）」动效。围绕帧率（FPS）用于帮助识别卡顿来源并选择更稳的实现方式。设计 preview，动画 transform 与 opacity，时长 420ms，幅度 28px，延迟 0ms，曲线使用柔和（cubic-bezier(0.23, 1, 0.32, 1)），并包含 reduced-motion fallback。

intent: entrancefeel: softcontext: card

使用场景

评审动效方案时，用帧率（FPS）判断风险。
和设计、工程或 agent 对齐实现标准。
把抽象动效原则转成可执行检查项。

示例

用帧率（FPS）检查一个动效是否会影响理解、性能或舒适度。
在评审中把帧率（FPS）写成明确的判断标准。

Review notes

把帧率（FPS）当作评审语言，避免只凭感觉判断。
检查它是否服务于方向、反馈、连续性、性能或舒适度。
如果它增加高频操作阻力，就降低或移除相关动效。

Reduced motion

帧率（FPS）页面在减少动态时保留静态示意和文字关系。