demo_gsap 教程

本教程介绍如何运行 GSAP SVG 演示，以及它的程序如何把页面控件连接到一个 GsapPlayer。

快速开始

在仓库根目录下：

just gsap-serve

打开 http://localhost:8081。圆环在 SVG 绘图中旋转；用按钮暂停、倒放和重新开始，拖动进度条跳转，选择速度，取消勾选 “LOOP” 使其在末尾停止，选择 “Dolly zoom” 切换场景。页面需要联网才能从 jsDelivr 加载 GSAP。

常见任务

阅读程序

src/demo_gsap/main.mbt 像 Canvas 演示那样构建场景，但以秒为单位的时间为自变量。main 创建一个 8 秒的 @gsap.GsapPlayer，其回调渲染所选场景并更新进度显示。然后它把每个控件绑定到播放器的一个方法：play/pause、reverse、restart、set_progress、set_time_scale 和 set_repeat。三个小的 extern "js" 函数处理 rabbita 未覆盖的页面细节：读取控件值、写入读数和按钮标签。

修改时长

DURATION_SECONDS 设置时间轴长度和读数。圆环角度与时间成正比，因此只有当圆环在新时长内转过整数圈时循环才是无缝的；推拉场景每 4 秒重复一次。

使用 GSAP 的本地副本

把 index.html 中的 jsDelivr URL 替换为本地 gsap ES 模块的路径；程序只要求在导入 demo.js 之前设置好 globalThis.gsap。

进阶

GSAP 教程单独展示了播放器和渲染器，GSAP 设计解释了画家排序何时是精确的。把这里的圆环与 Canvas 演示对比：在圆环自身重叠的地方，SVG 版本可能会短暂地把远处的三角形画在近处的三角形之上。

常见陷阱

• 离线使用。 没有网络时 GSAP 无法加载，程序会以 “geometry3d GSAP backend requires globalThis.gsap” 停止。
• 直接打开文件。 请通过 HTTP 提供该目录；模块脚本不会从 file:// 加载。

下一步

• demo_gsap API 说明了页面约定。
• demo_gsap 设计解释了时间如何驱动场景。