Squash & Stretch: Bars can overshoot target height then settle. Pie slices expand slightly on hover. Bubbles compress on collision. Keep total values accurate—animation is transitional.
Anticipation: Brief loading state before data appears. Slight shrink before expansion. Counter briefly pauses before rapid counting. Prepares user for incoming information.
Staging: Reveal data in meaningful sequence—most important first. Highlight active data series. Dim unrelated elements during focus. Guide the data story with motion.
Straight Ahead vs Pose to Pose: Real-time streaming data animates continuously (straight ahead). Dashboard snapshots transition between states (pose to pose). Match approach to data nature.
Follow Through & Overlapping: Data points enter with staggered timing. Labels settle after their data elements. Grid lines appear before data. Legends animate with slight delay.
Slow In / Slow Out: Value changes ease smoothly—no jarring jumps. Use
or equivalent. Counter animations accelerate then decelerate. Progress bars ease to completion.
Arc: Pie charts sweep clockwise from 12 o'clock. Sankey diagram flows follow curved paths. Network graphs use force-directed arcs. Radial charts expand from center.
Secondary Action: Tooltips follow data point movement. Value labels count up as bars grow. Axis tick marks respond to scale changes. Shadows indicate data depth.
Timing: Initial entry: 300-500ms staggered. Data updates: 200-300ms. Hover states: 100-150ms. Filter transitions: 400-600ms. Slower timing aids comprehension.
Exaggeration: Significant changes deserve attention—pulse or glow outliers. Threshold crossings trigger emphasis. Anomalies animate more dramatically. Don't exaggerate the data itself.
Solid Drawing: Maintain consistent scales during animation. Transitions shouldn't distort data relationships. Preserve axis alignment. Visual hierarchy must remain clear throughout motion.
Appeal: Data entry should feel satisfying. Professional, purposeful motion builds trust. Avoid gratuitous animation—every motion should aid understanding.
挤压与拉伸(Squash & Stretch):柱状图可以先超过目标高度再归位。鼠标悬停时饼图扇区轻微放大。气泡碰撞时产生挤压。确保总数值准确——动画仅用于过渡效果。
预备动作(Anticipation):数据出现前显示短暂加载状态。展开前先轻微收缩。计数器在快速计数前短暂停顿。帮助用户做好接收信息的准备。
舞台呈现(Staging):按有意义的顺序展示数据——先展示最重要的内容。高亮当前数据系列。聚焦时调暗无关元素。用动效引导数据叙事。
逐帧动画 vs 关键帧动画(Straight Ahead vs Pose to Pose):实时流式数据采用连续动画(逐帧)。仪表盘快照在不同状态间过渡(关键帧)。根据数据类型选择合适的方式。
跟随动作与重叠动作(Follow Through & Overlapping):数据点错峰入场。标签在对应数据元素之后归位。网格线先于数据出现。图例延迟片刻再动画展示。
缓入缓出(Slow In / Slow Out):数值变化平滑过渡——无突兀跳转。使用
或同类缓动函数。计数器动画先加速后减速。进度条缓动至完成状态。
弧线运动(Arc):饼图从12点钟方向顺时针扫动。桑基图(Sankey diagram)流沿曲线路径移动。网络图使用力导向弧线。径向图从中心向外扩展。
次要动作(Secondary Action):工具提示跟随数据点移动。数值标签随柱状图增长而计数。轴刻度响应刻度变化。阴影体现数据深度。
时间节奏(Timing):初始入场:300-500ms错峰。数据更新:200-300ms。悬停状态:100-150ms。筛选过渡:400-600ms。较慢的节奏有助于提升理解度。
夸张表现(Exaggeration):显著变化值得重点关注——异常值闪烁或高亮。阈值跨越时触发强调效果。异常数据的动画效果更夸张。注意不要篡改数据本身。
扎实绘制(Solid Drawing):动画过程中保持刻度统一。过渡效果不应扭曲数据关系。保持轴对齐。视觉层级在整个动效过程中必须清晰。
吸引力(Appeal):数据入场效果应舒适自然。专业、有目的性的动效能建立信任。避免无意义的动画——每一个动效都应有助于理解。