elegance-sophistication

优雅与精致动画

创作传递精致、奢华与含蓄卓越感的动画。

情感目标

优雅源于克制且时机精准的动作。精致意味着动画因品质而引人注目，而非数量——追求含蓄的卓越，而非刻意炫技。

优雅动画的迪士尼原则

挤压与拉伸

极其克制（0-5%）。精致的物体不会变形，而是轻盈滑动。动作过程中始终保持完美比例。

预备动作

微妙而精致的准备（100-150ms）。轻柔地转移重心，而非蓄势待发。优雅的动作平滑开启。

演出布局

留白与克制。让元素舒展呼吸。设置单一焦点，并留出充足边距。少即是多。

逐帧动作

避免使用。优雅需要掌控与精准。每一帧都应经过精心设计，尽显精致。

跟随与重叠动作

优雅地延展至稳定状态。如丝绸飘落般。以长而平滑的减速收尾，不反弹、不摇晃。

慢入与慢出

在起止两端采用较长的缓动。动作逐渐展开、流畅自然。精致过渡可使用 cubic-bezier(0.4, 0, 0.2, 1)。

弧线运动

流畅优雅的曲线。如指挥棒挥动或舞者的手臂。路径本身应当优美，而不只是终点。

次要动作

克制且有目的的点缀。细微的阴影变化、柔和的高光。辅助动作应提升质感，而非分散注意力。

时间节奏

从容但不缓慢（300-500ms）。留出欣赏动作的时间。奢华不需要匆忙。

夸张

几乎不使用（0-10%）。动作应真实而精致。含蓄之中见完美。

扎实绘制

始终保持无可挑剔的比例。不产生扭曲。讲求几何精度与平衡。

魅力

线条简洁，比例完美。采用单色或有限配色。美感历久弥新。

时间建议

元素	时长	缓动
淡入淡出	300-400ms	ease-in-out
滑动	400-500ms	ease-out
缩放	350-450ms	ease-in-out
显现	500-700ms	ease-out

CSS 缓动

--elegant-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--elegant-enter: cubic-bezier(0.0, 0, 0.2, 1);
--elegant-flow: cubic-bezier(0.45, 0, 0.55, 1);

精致过渡

@keyframes elegant-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elegant-element {
  animation: elegant-reveal 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

设计原则

• 留白是积极的设计元素，而非空白
• 动作用于呈现内容，而非装饰内容
• 时间节奏体现自信与品质
• 每个动画都应物有所值
• 克制彰显造诣

适用场景

• 奢侈品牌网站
• 时尚与珠宝
• 高端房地产
• 高端订阅服务
• 艺术画廊与博物馆
• 精致餐饮
• 精品酒店
• 高管仪表板