用途
该技能用于在图表、图形、仪表盘、数据过渡以及任何信息可视化工作中应用动画。其核心思路是把迪士尼的十二动画原则映射到数据可视化场景，让动效服务于理解，而不是单纯装饰。
主要能力
技能以快速参考表的形式，将十二原则与数据可视化实现一一对应：
- Squash & Stretch（挤压与拉伸）：柱状图过冲后回弹、饼图扇区悬停时轻微扩展、气泡碰撞时压缩。动画是过渡性的，总数值需保持准确。
- Anticipation（预备动作）：数据出现前的短暂加载状态、扩展前的轻微收缩、计数器在快速计数前的短暂停顿，用于让用户对即将到来的信息有所准备。
- Staging（舞台调度）：按有意义的顺序揭示数据，最重要的先出现；高亮当前数据系列；聚焦时弱化无关元素，用动效引导数据叙事。
- Straight Ahead / Pose to Pose（连续动作与姿势到姿势）：实时流式数据连续动画，仪表盘快照在状态之间过渡，按数据性质选择方式。
- Follow Through / Overlapping（跟随与重叠）：数据点错峰入场，标签在其数据元素之后稳定，网格线先于数据出现，图例带轻微延迟动画。
- Slow In / Slow Out（缓入缓出）：数值变化平滑缓动，避免突兀跳变；可使用 d3.easeCubicInOut 或等效方法；计数器先加速后减速；进度条缓动到完成。
- Arc（弧线）：饼图从 12 点方向顺时针扫掠，桑基图沿曲线路径流动，网络图使用力导向弧线，径向图表从中心扩展。
- Secondary Action（次要动作）：工具提示跟随数据点移动，数值标签随柱状图增长而计数，坐标轴刻度响应比例变化，阴影表示数据深度。
- Timing（时间节奏）：初始入场 300-500ms 错峰；数据更新 200-300ms；悬停状态 100-150ms；筛选过渡 400-600ms。较慢的节奏有助于理解。
- Exaggeration（夸张）：显著变化值得关注，可对离群值使用脉冲或发光；阈值跨越触发强调；异常值动画更明显。不要夸张数据本身。
- Solid Drawing（扎实构图）：动画过程中保持比例一致，过渡不应扭曲数据关系，保持坐标轴对齐，运动全程视觉层级清晰。
- Appeal（吸引力）：数据入场应令人满意，专业、有目的的动效建立信任，避免无意义的动画，每个动作都应有助于理解。
使用方式
技能提供 D3.js 与 Chart.js 的代码模式。
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。数据可视化动画应帮助理解而非阻碍理解，需为禁用动效的用户提供即时状态回退。动画是过渡性的，不应改变数据本身的准确性。