用途:绘制能解释信息、有意图地运动的 SVG 图形,例如赛跑秒表、逐片组装的构建输出、打字中的电脑、悬停时被唤醒的导航图标。图形由纯 SVG、一个投影和若干弹簧动画组成,不使用图形库、canvas 或视频。
主要能力:提供三种图形语法,不混用于同一页面。Iso faces(等距物体、深色填充面、细描边);Hairline(仅轮廓、单描边粗细、以背景色填充面);Glyph(固定 viewBox 的小型线图标,带一个强调描边,通过 CSS 关键帧在悬停或聚焦时动画)。
使用方式:先阅读 Inspirations 并研究参考图的静止、悬停和运动中间状态,再选语法;先画静止姿态,再加运动、指针响应和标签;在真实浏览器中逐帧验证。规则包括单一投影与描边粗细、round caps 与 joins、圆角、按绘制顺序处理遮挡、单点高亮、无发光或渐变、标签置于图形旁、以弹簧或明确时间线驱动动画、指针只减速或保持而不重播。数据图形需使用真实数据,显示在屏幕内时才运行。
适用场景:产品站点、文档、博客中的解释性插图,导航菜单与列表图标。
限制:资料未提供具体价格、平台支持范围或安装命令等信息。