AVW-9：视觉指南——工具 Logo 墙、架构图、对比表与演示索引

可视化架构图工具对比动画演示GSAPEChartsAntV在线演示

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AI 生成 UI | 视频与动效 | 程序化三剑客 | 中国生态 | AVW-9 视觉指南 ← 本文

# AVW-9 视觉指南 ## 工具 Logo 墙 ### 动画引擎 - GSAP - anime.js - Motion - Animate.css ### 可视化工具 - ECharts - AntV（G2 / G6 / X6） - Plotly - Observable / D3 ## Easing 曲线速查 ### 常用缓动类型 - power1~4（日常减速） - back.out（弹性过头） - elastic.out（橡皮筋） - bounce.out（弹跳） - expo.out（加速 fade） ### 推荐场景配对 - 卡片入场 → power2.out - Hero 标题 → power3.out - Modal 弹窗 → back.out(1.7) - 加载进度条 → none ## ScrollTrigger 原理 ### 关键参数 - start / end 触发区间 - pin 固定元素 - scrub 滚动映射进度 - markers 调试辅助线 ## 技术栈架构图 ### 四层结构 - 用户层：自然语言 Prompt - AI 生成层：v0 / bolt.new / CopilotKit / AVA / Remotion - 渲染层：GSAP / ECharts / Lottie / A2UI - 基础层：React / Vue / Canvas / WebGL ### 工具决策树 - 交互动画 → GSAP / Motion / anime.js - 数据可视化 → Plotly / ECharts / Bokeh / G6 - AI 建站 → bolt.new / v0 / CopilotKit - 生成视频 → Remotion / Editly / Motion Canvas ## 演示索引 ### GSAP CodePen - Timeline / Stagger / ScrollTrigger - SplitText / ScrambleText / DrawSVG / MorphSVG ### 数据可视化演示 - ECharts 平行坐标 / 3D 地球 - G6 知识图谱 / X6 流程图 - Plotly / Observable D3 / Flourish ### 交互叙事体验 - Twine / Ren'Py / Ink ### AI 生成演示 - v0 / bolt.new / CopilotKit / Remotion ## 关键数据对比 ### 可视化工具评分矩阵 - 图表种类 / 大数据 / 3D / 移动端 - AI 集成 / 中文文档 ### 动画引擎评分矩阵 - 复杂度 / 性能 / 滚动 / React 支持 - 生态 / 学习曲线

一、工具 Logo 墙

动画引擎

工具 Logo 官网
GSAP GSAP gsap.com
anime.js — animejs.com
Motion — motion.dev
Animate.css — animate.style

可视化工具

工具 Logo 官网
ECharts ECharts echarts.apache.org
AntV AntV antv.antgroup.com
Plotly — plotly.com
Observable — observablehq.com

二、GSAP Easing 曲线速查

动画的"性格"由缓动函数决定：

power1.out  ████████████░░░░  柔和减速
power2.out  ██████████░░░░░░  最常用，干脆利落  ← 日常首选
power3.out  ████████░░░░░░░░  有力，Hero 标题
power4.out  ██████░░░░░░░░░░  强冲击，弹出通知
back.out    ████████░░░░░░██  弹性过头，Modal 弹窗
elastic.out ████░░██░░██░░██  橡皮筋，趣味交互
bounce.out  ██░░██░░░░██░░██  弹跳，购物车图标
expo.out    ██████████████░░  加速 fade
none        ████████████████  匀速，加载进度条

在线工具: GSAP Ease Visualizer | Cubic-Bezier.com

场景 Ease 代码
日常卡片入场 power2.out ease: 'power2.out'
Hero 大标题 power3.out ease: 'power3.out'
Modal 弹窗 back.out(1.7) ease: 'back.out(1.7)'
加载进度条 none ease: 'none'
通知弹出 power4.in ease: 'power4.in'
趣味交互 elastic.out(1,0.3) ease: 'elastic.out(1,0.3)'

三、ScrollTrigger 滚动动画原理

┌───────────────────────────────────────────────┐
│                    VIEWPORT                     │
│                                                 │
│  ┌── start: 'top 80%' ────────────────────┐    │
│  │  ┌──────────────────────────────┐       │    │
│  │  │     TRIGGER ELEMENT          │       │    │
│  │  │   scroll 位置 → 动画进度     │       │    │
│  │  └──────────────────────────────┘       │    │
│  └── end: 'bottom 20%' ────────────────────┘    │
│                                                 │
│  ██████████████████████████████████ 滚动进度      │
│  ▲ start 触发          ▲ end 结束               │
└───────────────────────────────────────────────┘

pin: true   → 元素固定在屏幕上
scrub: true → 滚动条映射到动画进度
markers: true → 开发时显示 start/end 线

在线演示: ScrollTrigger CodePen 合集

四、AI 动态视觉 Web 技术栈架构图

第一行：用户层 → AI 生成层

flowchart LR A["用户层\n自然语言 Prompt"] --> B1["AI生成层\nv0 / bolt.new\n网站生成"] A --> B2["AI生成层\nCopilotKit\nAgent UI"] A --> B3["AI生成层\nAVA\n可视化推荐"] A --> B4["AI生成层\nRemotion\n视频生成"] A --> B5["AI生成层\nLLM+Ink/Ren'Py\n叙事生成"]

第二行：渲染层 → 基础层

flowchart LR B1["v0 / bolt.new"] --> C1["渲染层\nGSAP / Motion\n动画引擎"] B5["LLM+Ink/Ren'Py"] --> C1 B2["CopilotKit"] --> C4["渲染层\nA2UI Renderer\nAgent UI 渲染"] B3["AVA"] --> C2["渲染层\nECharts / G2 / Plotly\n数据图表"] B4["Remotion"] --> C1 B4 --> C2 C1 --> D["基础层\nReact / Vue / Svelte\nCanvas / WebGL / WASM\nNode.js / Bun / Python"] C2 --> D C4 --> D C3["渲染层\nLottie / Rive\n动效播放"] --> D

工具选择决策树

graph TD START{你要做什么?} START -->|网页交互动画| ANIM{技术栈?} ANIM -->|React| MOTION[Motion] ANIM -->|非React| GSAP[GSAP + ScrollTrigger] ANIM -->|轻量原型| ANIME[anime.js] START -->|数据可视化| VIZ{数据量?} VIZ -->|中小交互| PLOTLY[Plotly / ECharts] VIZ -->|大规模实时| BOKEH[Bokeh] VIZ -->|知识图谱| G6[G6 / Pyvis] START -->|AI建站| AIUI{复杂度?} AIUI -->|原型| BOLT[bolt.new] AIUI -->|生产| V0[v0] AIUI -->|Agent界面| COPILOT[CopilotKit] START -->|生成视频| VID{方式?} VID -->|React代码| REMOTION[Remotion] VID -->|JSON配置| EDITLY[Editly] VID -->|数学动画| MCANVAS[Motion Canvas]

五、动画演示索引

GSAP 核心演示（CodePen）

效果 链接 插件
Timeline 编排 CodePen Core
Stagger 交错 CodePen Core
ScrollTrigger 基础 CodePen ScrollTrigger
水平滚动画廊 CodePen ScrollTrigger
SplitText 逐字 CodePen SplitText
ScrambleText 乱码 CodePen ScrambleText
DrawSVG 描边 CodePen DrawSVG
MorphSVG 变形 CodePen MorphSVG
MotionPath 路径 CodePen MotionPath
GSAP + React StackBlitz @gsap/react

数据可视化演示

工具 演示链接
ECharts 平行坐标 echarts.apache.org
ECharts 3D 地球 echarts.apache.org
G6 知识图谱 g6.antv.antgroup.com
X6 流程图 x6.antv.antgroup.com
Plotly 平行坐标 plotly.com
Observable D3 画廊 observablehq.com
Flourish 展示 flourish.studio

交互叙事在线体验

工具 链接
Twine 编辑器 twinery.org
Ren'Py Web 版 renpy.beuc.net
Ink 交互示例 inklestudios.com/ink

AI 生成演示

工具 链接
v0 v0.app
bolt.new bolt.new
CopilotKit copilotkit.ai
Remotion Showcase remotion.dev/showcase

六、关键数据对比

可视化工具评分矩阵

工具 图表种类 大数据 3D 移动端 AI集成 中文文档 总评
ECharts ★★★★★ ★★★★ ★★★★ ★★★★★ ★★★ ★★★★★ 9.2
Plotly ★★★★ ★★★ ★★ ★★★ ★★★ ★★★ 8.0
Bokeh ★★★ ★★★★★ ★ ★★ ★★★ ★★ 7.5
G2 ★★★★ ★★★★ ★ ★★★★ ★★★★ ★★★★ 8.5
G6 ★★ ★★★★★ - ★★★ ★★★ ★★★★ 8.0
D3 ★★★★★ ★★★★ ★★ ★★ ★ ★★★ 8.5

动画引擎评分矩阵

引擎 复杂度 性能 滚动 React 生态 学习曲线 推荐场景
GSAP ★★★★★ ★★★★★ ★★★★★ ★★★★ ★★★★★ ★★★ 专业动画
Motion ★★★★ ★★★★ ★★★ ★★★★★ ★★★★ ★★★★ React 项目
anime.js ★★★ ★★★★ ★ ★★★ ★★★ ★★★★ 轻量创意
Animate.css ★ ★★★★ ★ ★★ ★★★★★ ★★★★★ 快速原型

本视觉指南持续更新。各篇文章内会引用此处的图表和演示链接。

实操清单

  • 打开 GSAP Ease Visualizer 逐个预览 power1~power4、back、elastic、bounce 曲线，记录各自适合的场景
  • 结合"Easing 曲线速查"表，在自己的项目中针对卡片入场换用 power2.out，对比修改前后视觉感受
  • 在 GSAP CodePen 演示索引中打开 Timeline 编排和 Stagger 交错两个示例，Fork 后修改 stagger 数值观察效果变化
  • 打开 ScrollTrigger 基础 CodePen，将 start: 'top 80%' 和 end: 'bottom 20%' 改为其他值，开启 markers: true 观察触发线位置
  • 在本地项目中实现一个带 pin: true + scrub: true 的水平滚动画廊，参考"水平滚动画廊"演示链接
  • 访问 ECharts 示例页面，分别查看平行坐标和 3D 地球演示，下载配置代码并在本地运行
  • 使用"工具选择决策树"架构图，根据自己当前项目需求找到推荐工具，访问对应官网文档
  • 对照"可视化工具评分矩阵"和"动画引擎评分矩阵"，选出最符合当前项目需求的工具各一个并说明理由
  • 访问 v0.app 或 bolt.new，输入一段界面需求描述，体验 AI 一键生成 UI 的效果
  • 打开 Twine 或 Ink 在线编辑器，编写一个至少包含 2 个分支选择的简单交互叙事原型