mcpField
C
calm-relaxation

calm-relaxation

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

关于 calm-relaxation

面向界面设计者的平静风格动画指南，依据迪士尼动画原则给出柔和、缓慢且可预测的动效建议，并列出时长与缓动参考。

主要功能

  1. 01以平缓可预测的动效营造平静感
  2. 02按动画原则提供设计建议
  3. 03提供时长与缓动参考值
  4. 04包含呼吸动画与 CSS 缓动示例

适用场景

  1. 01设计冥想与健康应用界面
  2. 02制作长任务加载状态
  3. 03构建阅读体验或环境背景
  4. 04设计夜间模式切换与欢迎页

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill calm-relaxation

安装后在 Claude Code 中输入/calm-relaxation确认已加载。

详细介绍

平静与放松动画

创建能抚慰人心、使人平静并营造宁静用户体验的动画。

情绪目标

平静源于缓慢、轻柔且可预测的运动。放松感来自会自然呼吸、流动，且不会吸引注意力或制造紧张感的动画。

用于营造平静感的迪士尼原则

挤压与拉伸

幅度非常轻微（2-5%）。采用轻柔的呼吸或脉动，而非弹跳。像云朵或水面一样柔和、自然地变形。

预备动作

缓慢、渐进地预备（200-400ms）。逐渐增强的动作不会让人感到意外。所有变化都提前充分显现。

演出布局

柔和的焦点、氛围式的布局。不刻意吸引注意力。各元素和谐共处，不相互争抢。

连续动作

环境动画采用轻柔、自然的流动效果。飘动的云朵、浮动的粒子、细微的渐变——自然且随机。

跟随与重叠动作

延展、优雅的跟随动作。较长的稳定时间（500ms+）。元素如水面上的落叶般缓缓漂至静止。

慢入与慢出

起始和结束阶段都采用较强的缓动。加速和减速都非常渐进。使用 cubic-bezier(0.4, 0, 0.6, 1) 实现平滑、轻柔的运动。

弧线运动

宽阔、舒展的曲线。柔和的抛物线。运动应如水流或风一般顺畅，绝不生硬或突兀。

次要动作

氛围式的背景运动。细微的视差、轻柔浮动的元素。辅助性的运动，不吸引注意力。

节奏

缓慢而从容（400-800ms+）。较长的时长更有冥想感。避免快速运动。呼吸节奏：每个周期 4-6 秒。

夸张

尽量减少或完全避免。采用逼真、自然的动作。细微能带来平静；夸张则会制造紧张感。

扎实绘图

边缘柔和、形态圆润。不使用尖锐的角。采用自然舒适的有机形状。

吸引力

柔和的色彩、低对比度。渐变平缓。形状圆润。美感自然、有机。

时间建议

元素时长缓动
淡入淡出过渡400-600msease-in-out
浮动元素3000-5000msease-in-out
呼吸脉动4000-6000msease-in-out
视差漂移800-1200msease-out

CSS 缓动

--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);

呼吸动画

@keyframes calm-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

.breathing-element {
  animation: calm-breathe 5s ease-in-out infinite;
}

适用场景

  • 冥想与健康应用
  • 长时间处理的加载状态
  • 氛围背景
  • 阅读体验
  • 夜间模式过渡
  • 医疗保健界面
  • 引导流程的欢迎屏幕
  • 无需庆祝的成功状态

评论

支持 Markdown