图表为什么会动：揭秘 Lieflat Charts 入场动画 reveal 机制与 reduced-motion 降级方案

图表为什么会动揭秘 Lieflat Charts 入场动画 reveal 机制与 reduced-motion 降级方案【免费下载链接】lieflat-chartsData visualization Skill for AI Agents, turning data into polished, interactive HTML charts. 面向 AI Agents 的数据可视化 Skill将数据快速生成精致、可交互的 HTML 图表。项目地址: https://gitcode.com/gh_mirrors/li/lieflat-chartsLieflat Charts 是一个面向 AI Agent 的数据可视化 Skill能把数据快速生成为精致、可交互的 HTML 图表。它生成的图表不只是画出来了还会在你滚动到视野时才优雅地动起来——这套入场动画叫做reveal 机制。本文带你彻底搞懂它为什么这么做、怎么做到以及它如何尊重系统的减弱动态效果prefers-reduced-motion设置为敏感用户自动降级成静态图表。为什么图表要动入场而不是直接就在那想象一份包含十几张图表的年度报告页。如果所有图在页面加载时就同时播放动画你会错过大部分效果视觉上也太吵。Lieflat Charts 的设计哲学是动画服务于阅读节奏——图在你看到它的那一刻才动动一次就够想再看就点一下重播。具体规则见 SKILL.md 第二节的动画硬规则入场动画默认开启节奏是quarticOut快进快停不弹跳波浪入场除外可用elasticOut点阵逐点延迟 8–15ms条形逐根延迟 80–130ms形成有呼吸感的 stagger统一 reveal 机制滚入视野才播 点击重播必须带prefers-reduced-motion降级这是硬性要求不是可选项下面是几种典型入场节奏的实拍效果reveal 机制的三层拆解整个机制浓缩在 mono-tokens.js 的obsReveal函数里这是所有图表ECharts / Chart.js / 手写 SVG共享的风格正本。第一层IntersectionObserver 触发滚入即播obsReveal内部创建一个 IntersectionObserver阈值设为 0.3——即图表容器有 30% 面积进入视口才判定可见然后执行回调fn开始渲染并立即io.disconnect()断开观察。这意味着首屏外的图表不浪费性能提前渲染每张图只自动播放一次滚动回来不会反复触发第二层timer 登记与清理防动画叠加手写 SVG 类图表常用setInterval做逐点/逐根 stagger。obsReveal配了一个keep(id, t)登记机制每次重播前先把上一轮登记的所有 timer 全部clearInterval掉再执行渲染函数。这就是自检清单里timer 不叠加的来源——反复点击不会让动画越叠越快。第三层点击重播 SVG 重置渲染容器被设置cursor: pointer并绑定 click 事件再次触发go()清 timer → 清空 SVG 内容innerHTML→ 重新渲染。对 ECharts 版本eReveal则是clear()后重新setOption()Chart.js 版本cReveal则是destroy()后重建实例。三种引擎、一条代码路径。在 templates/glance-gallery.html 中可以找到这套机制最完整的实现样本18 张 Glance 图全部通过eReveal/cReveal/obsReveal统一接管。reduced-motion 降级把动效变成开关把开关交给系统动画再好看对前庭敏感、晕动症用户也是负担。Lieflat Charts 的降级策略分两条线且都内建在 token 里随每个成品一起分发① CSS 动画类媒体查询直接掐掉。mono-tokens.js的MOTION.css内联了.pop缩放入场、.fade淡入、.draw描线三个 CSS 动画类并自带降级段media (prefers-reduced-motion:reduce){ .pop,.fade{animation:none} .draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0} }关键细节是.draw不仅关掉动画还重置stroke-dasharray/offset——否则线条会停留在未画出的空白状态。系统开启减弱动态效果后用户看到的是完整但静止的图。② 声明式动画引擎入场时机由 reveal 保证。ECharts / Chart.js 的动画是引擎声明式驱动animationDuration、easing、delayCSS 媒体查询管不到它们。但正因为 reveal 机制把何时开始渲染的控制权握在自己手里降级后的体验依然成立系统开启减弱动态效果时用户滚动到图表处看到的是瞬间成形的完整画面而不是自动播放的长动画——动画永远不会在用户没看到时偷偷发生。这条降级规则被写进了交付前自检清单SKILL.md 第八节第 6 条reveal 正常滚入播、点击重播、timer 不叠加、reduced-motion 降级在——缺任何一项都要返工。你可以在 examples/lenny-2026-survey.html 这份完整成品里看到降级样式如何随单文件一起分发。动画的性格约束快进快停不弹跳reveal 只是什么时候动怎么动由 token 的MOTION段锁死参数取值含义enter900ms常规入场时长enterSlow1200ms大图 / 关系图时长easingquarticOut快进快停不弹跳staggerDot12ms/个点阵逐个延迟8–15 区间staggerBar100ms/根条形逐根延迟80–130 区间另一条隐性规则同样重要动画不可优于结构——如果一个效果需要发明新布局才能安放它就不配存在。所以你会看到 templates/ 下的所有模板动效节奏和入场方式都高度一致换数据不换性格。自己动手验证三步看懂 reveal如果你想亲手体验这套机制打开 templates/glance-gallery.html先不要滚动观察首屏外的图表容器是空白状态——动画还没开始缓慢向下滚动注意每张图在你看到它的瞬间才播放入场动画反复点击任意已播完的图表会看到它干净利落地重播一遍timer 已先被清空不会叠加加速最后一步在系统设置里开启减弱动态效果macOS辅助功能 → 显示 → 减弱动态效果刷新页面——所有入场动画消失图表直接呈现完整状态小结把动当作交付的一部分Lieflat Charts 的 reveal 机制看似只是一个obsReveal函数实际是把四件事做成了硬约束时机滚入视野才播性能与阅读节奏双赢重播点击即重放timer 清理保证不叠加♿降级prefers-reduced-motion是必选项降级后图表完整可读️性格统一缓动、时长、stagger 全部来自 mono-tokens.js所有模板一眼一个家族对于用 AI Agent 生成图表的用户来说这套机制是隐形的——你只说帮我把这季度数据画一下拿到的单文件 HTML 就已经自带了全部动效与无障碍降级。想了解它支持哪些图型可以看 catalog.md 的 49 张图型目录以及 templates/reports/index.html 的 12 套报告模板索引。【免费下载链接】lieflat-chartsData visualization Skill for AI Agents, turning data into polished, interactive HTML charts. 面向 AI Agents 的数据可视化 Skill将数据快速生成精致、可交互的 HTML 图表。项目地址: https://gitcode.com/gh_mirrors/li/lieflat-charts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考