淡入
元素从透明渐变到完全不透明,常配合轻微位移或缩放。适合需要平静感的场景。
动画词汇表
12 个分类、48 个核心术语,每个术语都配有一个 StyleKit 真实可运行的动效作为参照。从设计师、工程师到 AI 提示词,都能用同一套词汇精确描述运动。
元素如何出现、就位和离开屏幕。
协调多个动画:何时开始、持续多久、按什么顺序。
平移、缩放、旋转和倾斜:在屏幕上移动元素的空间原语。
状态如何变化:交叉淡入、形状变形、折叠式布局切换。
由滚动位置驱动的动画:进入时显现、视差、翻页。
响应用户输入:悬停、按下、拖拽、抖动、波纹。
运动随时间的形状:ease-out 灵敏、ease-in 迟缓、cubic-bezier 精细调节。
基于物理的运动:刚度、阻尼、质量,及由此产生的过冲与稳定。
永不停止的连续运动:跑马灯、脉冲、闲置悬浮。
增添匠心的精修:模糊、剪切路径、线条绘制、打字机。
保持 60fps 的动画:合成层、GPU 加速、will-change、减弱动效。
决定动效加分还是减分的设计原则。