mcpField
D
deliberate-1200-2000ms

deliberate-1200-2000ms

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

关于 deliberate-1200-2000ms

面向 UI 设计师与开发者的动画设计指南，聚焦 1200–2000 ms 的叙事型动效。内容包括动画原则、缓动与 CSS 模式，也提醒提供跳过选项并考虑减少动态效果。

主要功能

  1. 01长时动画的叙事设计原则
  2. 02迪士尼 12 项原则的进阶应用
  3. 03叙事节奏的缓动建议
  4. 04CSS 关键帧实现模式
  5. 05减少动态效果与跳过选项的注意事项

适用场景

  1. 01设计应用启动序列
  2. 02制作品牌或成就动画
  3. 03构建故事化引导流程
  4. 04呈现错误到成功的状态变化

安装

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

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

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

详细介绍

精心设计的动画（1200-2000ms）

在 1200-2000ms 的时长内，你打造的是体验，而不是界面。这种时长适用于真正讲述故事的时刻，此时动画本身就是内容。

从容节奏下的迪士尼原则

完整的叙事表达

挤压与拉伸：塑造角色特征——30-40% 的形变能赋予个性，让物体成为角色。

预备动作：充分的戏剧性准备——300-400ms 的蓄势能营造紧张感和期待感。

演出布局：场景调度——从电影摄影的角度思考。先交代全景，再展现细节。确保叙事流畅清晰。

逐帧绘制/姿势到姿势：必须采用姿势到姿势的方式——通过 6-10 个关键姿势定义叙事弧线。

跟随动作：延长收尾过程——主要动作完成后，再用 300-500ms 呈现次要运动。

缓入缓出：叙事节奏——缓动曲线讲述情感故事。急促的开场意味着紧迫，柔和的收尾意味着圆满。

弧线运动：精心编排的路径——运动路径经过专门设计，而非默认生成。每个元素的轨迹都为整体构图添彩。

次要动作：完整的生态系统——主要、次要、三级和环境动作协同运作。

时间：以 60fps 计算，共 72-120 帧。符合动画品质的帧数。

夸张：情感强化——追求情感表现，而不只是动作。

扎实的造型：具有立体感的叙事——通过视差、深度和透视变化营造空间感。

吸引力：深入的情感共鸣——用户会在动画过程中产生感受。

缓动建议

/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);

/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);

/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);

/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

最佳使用场景

  • 应用启动画面/启动序列
  • 品牌时刻
  • 教程叙事
  • 成就庆祝
  • 里程碑动画
  • 情绪状态变化（从错误到成功）
  • 故事驱动的引导流程
  • 功能公告

实现模式

@keyframes appLaunch {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(50px);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    filter: blur(5px);
  }
  60% {
    transform: scale(1.02) translateY(-10px);
    filter: blur(0);
  }
  80% {
    transform: scale(0.99) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.app-launch {
  animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

重要注意事项

  • 用户必须能够跳过/关闭
  • 切勿阻断关键流程
  • 重复访问时应避免播放（检测回访用户）
  • 必须带来真正的价值，而非仅作装饰
  • 测试对动作敏感的情况（优先支持减少动态效果）

关键见解

精心设计的动画是品牌投资。它们不只是展示正在发生什么，更能让用户产生感受。应为设计、迭代和测试预留预算。这些时刻决定了用户对品质的感知。

评论

支持 Markdown