用途
Calm & Relaxation Animation 是一套面向“平静与放松”情感目标的动画设计指南，用于指导开发者与设计师创建能够安抚用户、减少焦虑、营造安宁与冥想体验的界面动画。其核心判断是：平静来自缓慢、柔和且可预测的运动；放松来自会“呼吸”、自然流动、从不强求注意力的动画。
主要能力
该指南以迪士尼动画十二原则为框架，逐一给出面向“平静”目标的重构建议：
- Squash & Stretch：非常细微（2-5%），用于轻柔的呼吸或脉动，而非弹跳；像云或水一样的柔和有机形变。
- Anticipation：较长而渐进的准备（200-400ms），让一切变化提前预告，不制造意外。
- Staging：柔和聚焦、环境化布局，不带有侵略性的注意力争夺，各元素和谐共享空间。
- Straight Ahead Action：适用于环境动画的轻柔有机流动，如飘动的云、漂浮的粒子、细微渐变等自然随机性。
- Follow Through & Overlapping Action：延长而优雅的跟随动作，长沉降时间（500ms+），元素如水面落叶般缓缓静止。
- Slow In & Slow Out：两端都使用重缓动，加速与减速非常渐进；推荐 cubic-bezier(0.4, 0, 0.6, 1)。
- Arc：宽阔舒展的曲线、柔和的抛物线，运动应像水或风一样流动，绝不出现棱角或突兀转折。
- Secondary Action：环境化、背景化的运动，如细微视差、轻柔漂浮元素，作为支撑而不抢夺注意力。
- Timing：缓慢而从容（400-800ms+），长时长带来冥想感；避免快速运动；呼吸节奏为每循环 4-6 秒。
- Exaggeration：尽量少用或不用；写实自然的动作才令人平静，夸张会制造张力。
- Solid Drawing：柔和边缘、圆润造型，无尖锐角度，呈现自然舒适的有机构型。
- Appeal：柔和色彩、低对比度、轻柔渐变、圆润形状，以及自然有机的美学。
使用方式
指南给出了可直接参考的时序推荐与代码片段。时序方面：淡入淡出 400-600ms（ease-in-out）；漂浮元素 3000-5000ms（ease-in-out）；呼吸脉冲 4000-6000ms（ease-in-out）；视差漂移 800-1200ms（ease-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% 时 scale(1)、opacity 0.8，50% 时 scale(1.02)、opacity 1，并以 .breathing-element 选择器应用 animation: calm-breathe 5s ease-in-out infinite。
适用场景
冥想与健康应用、长流程的加载状态、环境背景、阅读体验、夜间模式过渡、医疗健康界面、欢迎引导页，以及不需要庆祝感的成功状态。
限制
使用时应保持柔和边缘、圆润形态与低对比度，避免快速运动和强烈夸张。具体收费、价格、平台支持或效果承诺等信息暂未提供。