Luna Flow
日本語

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 を 1 つ作り、そのコールバックが選択中のシーンを描画して進捗表示を更新します。次に各コントロールをプレーヤーのメソッド 1 つ（play/pause、reverse、restart、set_progress、set_time_scale、set_repeat）に結び付けます。rabbita が扱わないページの細部、つまりコントロールの値の読み取りと表示やボタンのラベルの書き込みは、3 つの小さな extern "js" 関数が担当します。

長さを変える

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:// からは読み込まれません。

次のステップ