検索

ホームページ >ウェブフロントエンド >jsチュートリアル >GSAPアニメーションからアニメーションGIFを作成する方法

GSAPアニメーションからアニメーションGIFを作成する方法

Christopher Nolan
Christopher Nolanオリジナル
2025-02-08 10:31:09506ブラウズ

GSAPアニメーションをアニメーションGIFに変換する：現代GIFを使用するための段階的なガイド

キーポイント

    プロセスを使用して、GSAPアニメーションをAnimated GIFに変換し、SVGデータをキャプチャし、Tweenを調整するたびにHTMLキャンバスに書き込むことができます。このSVGデータは、ラスター化された画像データに変換できます。これは、Modern-GIFが使用してアニメーションGIFの各フレームを作成します。
    • 変換プロセスには、SVGデータのキャプチャ、SVGデータのラスター化データへの変換、最終的にラスター化データをGIFに変換するなど、複数のステップが含まれます。各ステップには、特定のコードの変更と、キャプチャされたデータを保存するための配列の使用が含まれます。
    • ブラウザアニメーションとGIFの間のフレームレートは通常異なるため、最終GIFのフレームレートは元のアニメーションよりも遅くなる可能性があります。 GIFをスピードアップするには、アレイフィルターとJavaScriptの残りのオペレーターを使用して、インデックスが数で分割できるかどうかを判断して、一部のフレームを破棄できます。
この記事では、GSAPを使用して作成されたアニメーションをModern-GIFを使用してアニメーションGIFに変換する方法について説明します。

以下は、私が以前に作ったアニメーションのプレビューです。

以下のリンクでは、この記事で参照するすべてのコードのライブプレビューを見つけることができます。 How to Create Animated GIFs from GSAP Animations

？

インデックス：gsap-animation-to-gif.netlify.app

simpleバージョン：gsap-animation-to-gif.netlify.app/simple
    • ⚙姉妹コードベース：github.com/pauliescanlon/gsap-animation-to-gif
      • コードベースには2つの「ページ」があります。インデックスには、上記のGIFのすべてのコードが含まれています。この記事で説明する手順の出発点です。
    • GSAPアニメーションをgif
  • に変換する方法
    • GSAPアニメーションをGIFに変換するために使用する方法には、SVGデータをキャプチャし、Tweenの各「更新」でHTMLキャンバスに書き込むことが含まれます。 Tweenが完了したら、SVGデータをラスター化された画像データに変換できます。これは、Animated GIFのすべてのフレームを作成するためにModern-GIFを使用できます。

初心者

これは私が私の簡単な例で使用したコードであり、GSAPアニメーションからアニメーションGIFを作成するために必要な各ステップを説明するために使用します：

このステップはもう少し複雑で、AnimationFramesアレイの各インデックスで1つの操作が必要です。

再帰関数を使用することにより、AnimationFramesアレイの画像データを使用してキャンバスに書き込むことができます。次に、canvas.todataurl（ 'image/jpeg'）を使用することにより、CanvasFramesアレイにアニメーションの各フレームのラスター化されたデータを保存できます。

oncomplete関数にconsole.logを追加した場合、ブラウザコンソールに次のようなものが表示されるはずです。ただし、今回はMIMEタイプのデータに注意してください。SVGXMLではなく、Image/JPEGです。これは、私がする次の仕事にとって重要です。 
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <title>Simple</title>


  <main>
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 200" width="{400}" height="{200}" style="{{" border: solid red>
      <rect id="rect" x="0" y="75" width="50" height="50" fill="red"></rect>
    </svg>
    <canvas id="canvas" style="{{" border: solid blue width="{400}" height="{200}"></canvas>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations ">
<h2>将 SVG 数据转换为光栅化数据</h2>
<pre class="brush:php;toolbar:false"><code class="language-javascript">gsap.timeline({
  onUpdate: () => {
    const xml = new XMLSerializer().serializeToString(svg);
    const src = `data:image/svg+xml;base64,${btoa(xml)}`;
    animationFrames.push(src);
  },
  onComplete: () => {
    let inc = 0;
    const renderSvgDataToCanvas = () => {
      const virtualImage = new Image();
      virtualImage.src = animationFrames[inc];
      virtualImage.onload = () => {
        ctx.clearRect(0, 0, 400, 200);
        ctx.drawImage(virtualImage, 0, 0, 400, 200);
        canvasFrames.push(canvas.toDataURL('image/jpeg'));
        inc++;
        if (inc < animationFrames.length) {
          renderSvgDataToCanvas();
        } else {
          //console.log(canvasFrames); //调试用
          generateGif();
        }
      };
    };
    renderSvgDataToCanvas();
  },
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });</code>

ラスター化データをgif

に変換します

これは最後のステップであり、CanvasFramesアレイの各インデックスを最新のGIFに渡すことを伴います。 

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <title>Simple</title>


  <main>
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 200" width="{400}" height="{200}" style="{{" border: solid red>
      <rect id="rect" x="0" y="75" width="50" height="50" fill="red"></rect>
    </svg>
    <canvas id="canvas" style="{{" border: solid blue width="{400}" height="{200}"></canvas>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations ">
<h2>将 SVG 数据转换为光栅化数据</h2>
<pre class="brush:php;toolbar:false"><code class="language-javascript">gsap.timeline({
  onUpdate: () => {
    const xml = new XMLSerializer().serializeToString(svg);
    const src = `data:image/svg+xml;base64,${btoa(xml)}`;
    animationFrames.push(src);
  },
  onComplete: () => {
    let inc = 0;
    const renderSvgDataToCanvas = () => {
      const virtualImage = new Image();
      virtualImage.src = animationFrames[inc];
      virtualImage.onload = () => {
        ctx.clearRect(0, 0, 400, 200);
        ctx.drawImage(virtualImage, 0, 0, 400, 200);
        canvasFrames.push(canvas.toDataURL('image/jpeg'));
        inc++;
        if (inc < animationFrames.length) {
          renderSvgDataToCanvas();
        } else {
          //console.log(canvasFrames); //调试用
          generateGif();
        }
      };
    };
    renderSvgDataToCanvas();
  },
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });</code>
ModernGif.Encodeを使用して、データの配列をフレームに渡し、各フレームの遅延を定義することができ、0秒の遅延を追加することを選択しました。

コードの次の部分は、ModernGif.Ecodeデータの変換を処理し、「別の」Mimeタイプ、今回の画像/GIFに変換します。

アニメーションGIFを表す最終的な「ブロブ」データを取得したら、それをURLに変換し、画像要素とリンク要素のSRCとHREFを設定して、ブラウザでGIFを表示およびダウンロードできるようにします。

How to Create Animated GIFs from GSAP Animations

フレームレート

ブラウザで実行されているアニメーションは通常60フレーム（fps）を再生するため、最終的なGIFが非常にゆっくりと実行されることに気付くかもしれませんが、GIFは通常12 fpsまたは24 fpsではるかに遅くなります。

いくつかのアニメーションフレームを「破棄」するには、配列フィルターとJavaScriptの残りのオペレーターを使用して、インデックスが特定の数字で割り切れることができるかどうかを判断します。私の場合、6を選択します。 6で分割できないインデックスは、配列から除外されます。生成されたアニメーションGIFは少し不器用ですが、はるかに速く再生されます。

フレームレートの調整を実装するために

メソッドをgenerateGif関数に追加しました。 filter

それだけです。GSAPSVGアニメーションをHTMLキャンバスを介してアニメーションGIFに変換できます！

この記事で説明されていることについて質問がある場合は、Twitter/X：@PauliesCanlonで私を見つけてください。

以上がGSAPアニメーションからアニメーションGIFを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html 运算符 xml Filter 递归 console href animation canvas github
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：StorybookとChromaticでReactアプリをスケーリングします次の記事：StorybookとChromaticでReactアプリをスケーリングします

関連記事

続きを見る