用途
本技能用于在界面或品牌体验中创建传达奢华、精致与高级感的动画。其核心情感目标是：优雅源于克制且时机完美的运动；精致意味着动画因质量而非数量被注意——是微妙的卓越，而非明显的用力。
主要能力
技能将迪士尼动画原则映射到“优雅”这一情感目标上，给出每项原则的具体做法：
- 挤压与拉伸：极少量（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;
}
设计原则：
- 留白是主动的，不是空的
- 运动揭示内容，而非装饰内容
- 时间体现自信与品质
- 每个动画都应赢得自己的位置
- 克制体现精通
适用场景
- 奢侈品牌网站
- 时尚与珠宝
- 高端房地产
- 高级订阅
- 艺术画廊与博物馆
- 高级餐饮
- 精品酒店
- 高管仪表盘
限制
资料未提供关于该技能的具体安装命令、依赖要求、平台兼容性、收费或价格信息，这些内容暂未提供。