mcpField
S
slow-800-1200ms

slow-800-1200ms

github.com/dylantarre设计与 UI132481 次安装43 周前更新
代码仓库

关于 slow-800-1200ms

面向 UI 动画设计者的慢速动画指南，聚焦 800–1200 ms 的戏剧性动效。内容涵盖动画原则、缓动建议和适用场景，也指出不宜使用的情境。

主要功能

  1. 01800–1200 ms 动效原则
  2. 02迪士尼动画原则应用
  3. 03缓动曲线建议
  4. 04慢速动画实现示例

适用场景

  1. 01设计应用启动序列
  2. 02呈现重要功能或成就
  3. 03制作教程与首次使用动效

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill slow-800-1200ms

安装后在 Claude Code 中输入/slow-800-1200ms确认已加载。

详细介绍

慢速动画（800-1200ms）

在 800-1200ms 的时长下，动画已接近电影级效果。这是为重要时刻精心设计的刻意动效。用户需要停下来观看。

慢速下的迪士尼原则

电影化应用

挤压与拉伸：明显且富有个性——25-35% 的形变能够讲述故事。物体具有重量感和个性。

预备动作：完整的戏剧性蓄势——200-300ms 的准备时间。观众能预感到即将发生什么。

演出布局：场景构图——从镜头和舞台的角度思考。通过入场顺序营造清晰的视觉层级。

连续动作／关键姿势：关键姿势至关重要——1 秒的动作需要 4-6 个关键姿势。

跟随动作：延长重叠动作——不同元素在明显不同的时间稳定下来，稳定过程持续 200-300ms。

缓入／缓出：戏剧性的曲线——强烈的缓入营造重量感，强烈的缓出带来冲击力。

弧线运动：大幅弧线——运动路径具有清晰可见的弧度。

次要动作：复杂的层次——多个层次的辅助动作能强化主要动作。

时间控制：在 60fps 下为 48-72 帧，帧数接近电影品质。

夸张：戏剧化处理——加大比例和动作幅度，增强情感冲击。

扎实绘图：完整的立体变换——视差、深度、3D 旋转。

吸引力：建立情感联结——慢动作能让用户与界面更加亲近。

缓动建议

/* Dramatic, weighted motion */
transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);

/* Graceful entrance */
transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);

/* Heavy, impactful landing */
transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);

/* Elastic, memorable */
transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

最佳使用场景

  • 应用启动序列
  • 重大功能揭晓
  • 叙事时刻
  • 错误恢复动画
  • 成就解锁
  • 教程序列
  • 首次运行体验
  • 演示文稿中的章节切换
  • 从加载状态切换到内容展示

实现模式

@keyframes slowReveal {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.slow-reveal {
  animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered sequence */
.sequence-item {
  animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sequence-item:nth-child(n) {
  animation-delay: calc(var(--index) * 150ms);
}

不适用场景

  • 视图间导航（太慢）
  • 重复交互（用户会失去耐心）
  • 高频操作
  • 数据密集型界面
  • 效率工具

关键要点

慢速动画需要用户投入注意力作为代价。仅在值得用户花费时间的时刻使用。这些动画创造的是记忆，而不只是反馈。

评论

支持 Markdown