data-visualization

数据可视化动画

将迪士尼的 12 条动画原则应用于图表、仪表板和信息展示。

快速参考

原则	数据可视化中的应用
挤压与拉伸	柱形越过目标后回弹、弹性定格
预备动作	数据加载前短暂停顿
演出布局	依次呈现、建立焦点层级
直线动作与姿势动作	流式数据与快照数据
跟随动作与重叠动作	元素错峰进入
慢入与慢出	平滑插值数值
弧线	饼图扫入、流程图
次要动作	标签跟随数据点
时间控制	入场 300-500ms，更新 200-300ms
夸张	突出显著变化
扎实绘图	刻度一致、关系清晰
吸引力	令人满意的呈现、专业润色

原则应用

挤压与拉伸：柱形可以越过目标高度后回落定格。饼图扇区在悬停时稍微扩展。气泡碰撞时会被挤压。确保总值准确——动画只是过渡效果。

预备动作：数据出现前显示短暂的加载状态。扩展前稍微收缩。计数器快速计数前短暂停顿。让用户为即将出现的信息做好准备。

演出布局：按有意义的顺序呈现数据——最重要的数据优先。突出显示当前活动的数据系列。聚焦时淡化无关元素。用动态效果引导数据叙事。

直线动作与姿势动作：实时流式数据以连续方式动画呈现（直线动作）。仪表板快照在状态之间切换（姿势动作）。根据数据性质选择合适的方式。

跟随动作与重叠动作：数据点错开时间进入。标签在对应数据元素之后定格。先显示网格线，再显示数据。图例稍作延迟后再动画呈现。

慢入与慢出：数值变化平滑过渡——避免突兀跳变。使用 d3.easeCubicInOut 或同等效果。计数器动画先加速再减速。进度条平滑推进至完成。

弧线：饼图从 12 点钟方向顺时针扫入。桑基图沿曲线路径流动。网络图使用力导向弧线。径向图表从中心向外扩展。

次要动作：工具提示跟随数据点移动。数值标签随着柱形增高而递增。坐标轴刻度标记随比例变化而调整。阴影表示数据深度。

时间控制：初始入场：错峰显示，持续 300-500ms。数据更新：200-300ms。悬停状态：100-150ms。筛选器过渡：400-600ms。较慢的节奏有助于理解。

夸张：显著变化值得关注——让异常值脉动或发光。越过阈值时触发强调效果。异常情况使用更明显的动画。不要夸大数据本身。

扎实绘图：动画过程中保持刻度一致。过渡不应扭曲数据关系。保持坐标轴对齐。整个动态过程中都必须维持清晰的视觉层级。

吸引力：数据入场应令人满意。专业且有目的的动态效果能建立信任。避免无谓的动画——每个动态效果都应有助于理解。

代码模式

D3.js

// 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

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

数据类型对应的时长

可视化类型	入场	更新	悬停
柱状图	错峰显示 400ms	300ms	100ms
折线图	绘制 600ms	400ms	150ms
饼图	扫入 500ms	300ms	100ms
散点图	错峰显示 300ms	200ms	100ms
仪表板	级联显示 500-800ms	300ms	150ms

无障碍说明

始终尊重 prefers-reduced-motion。数据可视化动画应有助于理解，而不是造成妨碍。为禁用动态效果的用户提供即时状态回退方案。