Back to Details

data-visualization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Data Visualization Animation

数据可视化动画

Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.
将迪士尼的12条动画原则应用于图表、图形、仪表盘和信息展示中。

Quick Reference

快速参考

PrincipleData Viz Implementation
Squash & StretchBar overshoot, elastic settling
AnticipationBrief pause before data loads
StagingSequential reveal, focus hierarchy
Straight Ahead / Pose to PoseStreaming vs snapshot data
Follow Through / OverlappingStaggered element entry
Slow In / Slow OutSmooth value interpolation
ArcPie chart sweeps, flow diagrams
Secondary ActionLabels following data points
TimingEntry 300-500ms, updates 200-300ms
ExaggerationEmphasize significant changes
Solid DrawingConsistent scales, clear relationships
AppealSatisfying reveals, professional polish
原则数据可视化实现方式
挤压与拉伸（Squash & Stretch）柱状图过冲、弹性归位
预备动作（Anticipation）数据加载前短暂停顿
舞台呈现（Staging）顺序展示、焦点层级
逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）流式数据 vs 快照数据
跟随动作/重叠动作（Follow Through / Overlapping）元素错峰入场
缓入缓出（Slow In / Slow Out）平滑值插值
弧线运动（Arc）饼图扫动、流程图
次要动作（Secondary Action）标签跟随数据点
时间节奏（Timing）入场300-500ms、更新200-300ms
夸张表现（Exaggeration）强调显著变化
扎实绘制（Solid Drawing）统一刻度、清晰关系
吸引力（Appeal）舒适的展示效果、专业打磨

Principle Applications

原则应用

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 
d3.easeCubicInOut
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）：数值变化平滑过渡——无突兀跳转。使用
d3.easeCubicInOut
或同类缓动函数。计数器动画先加速后减速。进度条缓动至完成状态。
弧线运动（Arc）：饼图从12点钟方向顺时针扫动。桑基图（Sankey diagram）流沿曲线路径移动。网络图使用力导向弧线。径向图从中心向外扩展。
次要动作（Secondary Action）：工具提示跟随数据点移动。数值标签随柱状图增长而计数。轴刻度响应刻度变化。阴影体现数据深度。
时间节奏（Timing）：初始入场：300-500ms错峰。数据更新：200-300ms。悬停状态：100-150ms。筛选过渡：400-600ms。较慢的节奏有助于提升理解度。
夸张表现（Exaggeration）：显著变化值得重点关注——异常值闪烁或高亮。阈值跨越时触发强调效果。异常数据的动画效果更夸张。注意不要篡改数据本身。
扎实绘制（Solid Drawing）：动画过程中保持刻度统一。过渡效果不应扭曲数据关系。保持轴对齐。视觉层级在整个动效过程中必须清晰。
吸引力（Appeal）：数据入场效果应舒适自然。专业、有目的性的动效能建立信任。避免无意义的动画——每一个动效都应有助于理解。

Code Patterns

代码示例

D3.js

D3.js

javascript
// Staggered bar entry with easing
bars.transition()
    .duration(500)
    .delay((d, i) => i * 50)
    .ease(d3.easeCubicOut)
    .attr("height", d => yScale(d.value))
    .attr("y", d => height - yScale(d.value));

// Smooth data updates
bars.transition()
    .duration(300)
    .ease(d3.easeCubicInOut)
    .attr("height", d => yScale(d.value));
javascript
// Staggered bar entry with easing
bars.transition()
    .duration(500)
    .delay((d, i) => i * 50)
    .ease(d3.easeCubicOut)
    .attr("height", d => yScale(d.value))
    .attr("y", d => height - yScale(d.value));

// Smooth data updates
bars.transition()
    .duration(300)
    .ease(d3.easeCubicInOut)
    .attr("height", d => yScale(d.value));

Chart.js

Chart.js

javascript
// Animation configuration
options: {
    animation: {
        duration: 500,
        easing: 'easeOutQuart',
        delay: (context) => context.dataIndex * 50
    }
}
javascript
// Animation configuration
options: {
    animation: {
        duration: 500,
        easing: 'easeOutQuart',
        delay: (context) => context.dataIndex * 50
    }
}

Data Type Timing

数据类型对应节奏

VisualizationEntryUpdateHover
Bar chart400ms stagger300ms100ms
Line chart600ms draw400ms150ms
Pie chart500ms sweep300ms100ms
Scatter plot300ms stagger200ms100ms
Dashboard500-800ms cascade300ms150ms
可视化类型入场更新悬停
柱状图400ms错峰300ms100ms
折线图600ms绘制400ms150ms
饼图500ms扫动300ms100ms
散点图300ms错峰200ms100ms
仪表盘500-800ms级联300ms150ms

Accessibility Note

无障碍设计说明

Always respect 
prefers-reduced-motion
. Data visualization animation should aid comprehension, not hinder it. Provide instant-state fallback for users who disable motion.
请始终尊重
prefers-reduced-motion
设置。数据可视化动画应有助于理解，而非造成障碍。为禁用动效的用户提供即时状态回退方案。