calm-relaxation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Calm & Relaxation Animation

平静放松类动画

Create animations that soothe, settle, and create peaceful user experiences.

创建能够安抚情绪、平复心情，且营造宁静用户体验的动画。

Emotional Goal

情感目标

Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.

平静感源于缓慢、柔和、可预测的动效。放松感则来自具备呼吸感、自然流畅，且不会吸引过度注意力或造成紧张感的动画。

Disney Principles for Calm

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

Squash & Stretch

挤压与拉伸

Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.

幅度极其细微（2-5%）。采用轻柔的呼吸或脉动效果，而非弹跳。类似云朵或水流的柔和、有机变形。

Anticipation

预备动作

Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.

漫长且平缓的准备阶段（200-400毫秒）。缓慢的铺垫不会带来意外感，所有动效都会提前充分预示。

Staging

舞台呈现

Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.

柔焦效果、氛围化布局。避免强行吸引注意力。元素和谐共处，互不争抢视线。

Straight Ahead Action

连续动作

Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.

用于氛围动画的柔和、有机流动效果。比如飘动的云朵、悬浮的粒子、细微的渐变——模拟自然的随机性。

Follow Through & Overlapping Action

跟随动作与重叠动作

Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.

舒展、优雅的跟随动效。较长的稳定时长（500毫秒以上）。元素如同水面上的落叶般缓缓归位。

Slow In & Slow Out

缓入缓出

Heavy easing on both ends. Very gradual acceleration and deceleration.

cubic-bezier(0.4, 0, 0.6, 1)

for smooth, gentle motion.

两端均采用强缓动效果。极其平缓的加速与减速。可使用

cubic-bezier(0.4, 0, 0.6, 1)

实现流畅柔和的动效。

Arc

运动弧线

Wide, sweeping curves. Gentle parabolas. Motion should flow like water or wind—never angular or abrupt.

宽阔、舒展的曲线。柔和的抛物线轨迹。动效应如水流或风般流动——绝无生硬的棱角或突兀的转折。

Secondary Action

次要动作

Ambient, background motion. Subtle parallax, gentle floating elements. Supporting motion that doesn't demand attention.

氛围化的背景动效。细微的视差滚动、柔和的悬浮元素。作为辅助动效，不会吸引过度注意力。

Timing

时长控制

Slow and deliberate (400-800ms+). Long durations feel meditative. No quick movements. Breathing rhythm: 4-6 seconds per cycle.

缓慢且从容（400-800毫秒以上）。较长的时长能营造冥想感。避免快速动作。呼吸节奏：每个周期4-6秒。

Exaggeration

夸张表现

Minimal to none. Realistic, natural movements. Subtlety is calming; exaggeration creates tension.

尽量弱化甚至完全避免。采用写实、自然的动作。细微的变化能带来平静感，夸张则会引发紧张。

Solid Drawing

扎实构图

Soft edges, rounded forms. No sharp angles. Organic shapes that feel natural and comfortable.

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

Appeal

视觉吸引力

Soft colors, low contrast. Gentle gradients. Rounded shapes. Natural, organic aesthetics.

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

Timing Recommendations

时长建议

Element	Duration	Easing
Fade transitions	400-600ms	`ease-in-out`
Floating elements	3000-5000ms	`ease-in-out`
Breathing pulse	4000-6000ms	`ease-in-out`
Parallax drift	800-1200ms	`ease-out`

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

CSS Easing

CSS 缓动参数

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);

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);

Breathing Animation

呼吸动效实现

css

@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;
}

css

@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;
}

When to Use

适用场景

Meditation and wellness apps
Loading states for long processes
Ambient backgrounds
Reading experiences
Night mode transitions
Healthcare interfaces
Onboarding welcome screens
Success states that don't need celebration

冥想与健康类应用
长流程加载状态
氛围背景
阅读体验场景
夜间模式切换
医疗健康类界面
新手引导欢迎界面
无需过度庆祝的成功状态