重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
data-visualization by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill data-visualization将迪士尼的 12 条动画原理应用于图表、图形、仪表盘和信息展示。
| 原理 | 数据可视化实现 |
|---|---|
| 挤压与拉伸 | 柱状图过冲,弹性稳定 |
| 预备动作 | 数据加载前的短暂停顿 |
| 舞台布局 | 顺序展示,焦点层级 |
| 逐帧动画 / 姿势对应 | 流式数据 vs 快照数据 |
| 跟随与重叠 | 元素错开进入 |
| 慢入慢出 | 平滑的数值插值 |
| 弧线运动 | 饼图扇形扫掠,流程图 |
| 次要动作 | 标签跟随数据点移动 |
| 时间节奏 | 进入 300-500ms,更新 200-300ms |
| 夸张手法 | 强调显著变化 |
| 扎实的描绘 | 一致的刻度,清晰的关系 |
| 吸引力 | 令人满意的展示效果,专业的润色 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
挤压与拉伸:柱状图可以超过目标高度然后稳定下来。饼图扇区在悬停时轻微膨胀。气泡在碰撞时压缩。保持总值准确——动画是过渡性的。
预备动作:数据出现前短暂的加载状态。在展开前轻微收缩。计数器在快速计数前短暂停顿。为用户接收即将到来的信息做准备。
舞台布局:以有意义的顺序展示数据——最重要的先展示。高亮激活的数据系列。在聚焦时淡化不相关的元素。用动作为数据故事引导视线。
逐帧动画 vs 姿势对应:实时流式数据持续动画(逐帧动画)。仪表盘快照在不同状态间过渡(姿势对应)。根据数据性质匹配方法。
跟随与重叠:数据点以错开的时间进入。标签在其数据元素之后稳定下来。网格线在数据之前出现。图例以轻微延迟动画。
慢入慢出:数值变化平滑过渡——没有突兀的跳跃。使用 d3.easeCubicInOut 或等效方法。计数器动画先加速后减速。进度条缓动至完成。
弧线运动:饼图从 12 点钟方向顺时针扫掠。桑基图的流动遵循曲线路径。网络图使用力导向弧线。径向图从中心展开。
次要动作:工具提示跟随数据点移动。数值标签随着柱状图增长而计数。坐标轴刻度标记响应比例变化。阴影指示数据深度。
时间节奏:初始进入:300-500ms 错开。数据更新:200-300ms。悬停状态:100-150ms。筛选器过渡:400-600ms。较慢的节奏有助于理解。
夸张手法:显著变化值得关注——对异常值使用脉动或发光效果。阈值跨越触发强调。异常情况动画更富戏剧性。不要夸张数据本身。
扎实的描绘:在动画过程中保持一致的刻度。过渡不应扭曲数据关系。保持坐标轴对齐。视觉层次必须在整个运动过程中保持清晰。
吸引力:数据进入应让人感觉满意。专业、有目的的运动能建立信任。避免不必要的动画——每一个动作都应有助于理解。
// 带缓动的错开柱状图进入
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));
// 平滑的数据更新
bars.transition()
.duration(300)
.ease(d3.easeCubicInOut)
.attr("height", d => yScale(d.value));
// 动画配置
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。数据可视化动画应有助于理解,而不是阻碍理解。为禁用运动的用户提供即时状态回退。
每周安装量
69
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex58
gemini-cli57
opencode57
cursor52
github-copilot51
amp47
Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.
| Principle | Data Viz Implementation |
|---|---|
| Squash & Stretch | Bar overshoot, elastic settling |
| Anticipation | Brief pause before data loads |
| Staging | Sequential reveal, focus hierarchy |
| Straight Ahead / Pose to Pose | Streaming vs snapshot data |
| Follow Through / Overlapping | Staggered element entry |
| Slow In / Slow Out | Smooth value interpolation |
| Arc | Pie chart sweeps, flow diagrams |
| Secondary Action | Labels following data points |
| Timing | Entry 300-500ms, updates 200-300ms |
| Exaggeration | Emphasize significant changes |
| Solid Drawing | Consistent scales, clear relationships |
| Appeal | Satisfying reveals, professional polish |
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.
// 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));
// Animation configuration
options: {
animation: {
duration: 500,
easing: 'easeOutQuart',
delay: (context) => context.dataIndex * 50
}
}
| Visualization | Entry | Update | Hover |
|---|---|---|---|
| Bar chart | 400ms stagger | 300ms | 100ms |
| Line chart | 600ms draw | 400ms | 150ms |
| Pie chart | 500ms sweep | 300ms | 100ms |
| Scatter plot | 300ms stagger | 200ms | 100ms |
| Dashboard | 500-800ms cascade | 300ms | 150ms |
Always respect prefers-reduced-motion. Data visualization animation should aid comprehension, not hinder it. Provide instant-state fallback for users who disable motion.
Weekly Installs
69
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex58
gemini-cli57
opencode57
cursor52
github-copilot51
amp47
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装