suchen

Heim >Web-Frontend >js-Tutorial >So erstellen Sie animierte GIFs aus GSAP -Animationen

So erstellen Sie animierte GIFs aus GSAP -Animationen

Christopher Nolan
Christopher NolanOriginal
2025-02-08 10:31:09414Durchsuche

GSAP-Animationen in animierte GIFs konvertieren: Eine Schritt-für-Schritt-Anleitung zur Verwendung moderner GIFs

Schlüsselpunkte

  • Sie können einen Prozess verwenden, um GSAP -Animationen in animierte GIFs umzuwandeln, bei denen SVG -Daten erfasst und jedes Mal, wenn Sie das Tween anpassen, auf die HTML -Leinwand schreiben. Diese SVG-Daten können dann in rasterisierte Bilddaten konvertiert werden, die dann von Modern-GIF verwendet werden, um jeden Frame des animierten GIF zu erstellen.
  • Der Konvertierungsprozess umfasst mehrere Schritte, einschließlich des Erfassung von SVG -Daten, der Konvertierung von SVG -Daten in rasterisierte Daten und schließlich konvertieren die rasterisierten Daten in GIF. Jeder Schritt umfasst spezifische Codeänderungen und die Verwendung von Arrays zum Speichern erfassender und transformierter Daten.
  • Da die Bildrate zwischen Browseranimationen und GIFs normalerweise unterschiedlich sind, sind die Bildraten der endgültigen GIFs möglicherweise langsamer als die ursprüngliche Animation. Um GIFs zu beschleunigen, können Sie Array -Filter und JavaScript -Restbetreiber verwenden, um festzustellen, ob der Index durch eine Zahl teilbar sein kann und so einige Frames verworfen.

In diesem Artikel wird erläutert, wie Animationen, die mit GSAP erstellt werden, mit modernem GIF in animierte GIFs konvertiert werden.

Folgendes ist eine Vorschau einer Animation, die ich zuvor gemacht habe:

How to Create Animated GIFs from GSAP Animations

In dem folgenden Link finden Sie eine Live -Vorschau auf den gesamten Code, auf den Sie in diesem Artikel verweisen:

  • ?
      Index: GSAP-Animation-to-Gif.netlify.app
      • Einfache Version: GSAP-Animation-to-Gif.netlify.app/Simple
    • ⚙️ Codebasis: github.com/pauliescanlon/gsap-animation-to-gif
Es gibt zwei "Seiten" in der Codebasis. Der Index enthält den gesamten Code für das obige GIF, einfach ist der Ausgangspunkt für die in diesem Artikel beschriebenen Schritte.

wie man die GSAP -Animation in GIF

konvertiert

Die Methode, mit der ich GSAP -Animationen in GIFs konvertieren, beinhaltet das Erfassen von SVG -Daten und das Schreiben an eine HTML -Leinwand bei jedem "Update" des Tween. Sobald das TWEEN fertig ist, kann ich die SVG-Daten in rasterisierte Bilddaten umwandeln, mit denen das moderne GIF jeden Frame eines animierten GIF erstellen kann.

Anfänger

Dies ist der Code, den ich in meinem einfachen Beispiel verwendet habe, und ich werde ihn verwenden, um jeden Schritt zu erläutern, um ein animiertes GIF aus einer GSAP -Animation zu erstellen: 

<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="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" 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>

Dieser Schritt ist etwas komplizierter und erfordert einen Vorgang auf jedem Index des AnimationFrames -Arrays.

Durch die Verwendung der rekursiven FunktionsrendersVgDatatoCanvas kann ich die Bilddaten im AnimationFrames -Array verwenden, um sie auf die Leinwand zu schreiben. Durch die Verwendung von canvas.todataurl ('Image/JPEG') kann ich die rasterisierten Daten jedes Frame der Animation im Canvasframes -Array speichern.

Wenn Sie Console.log in der OnComplete -Funktion hinzugefügt haben, sollten Sie in der Browser -Konsole etwas ähnliches wie folgt sehen. Beachten Sie jedoch diesmal den MIME -Typ der Daten: Es handelt sich nicht um SVG XML, sondern Bild/JPEG. Dies ist wichtig für die nächste Arbeit, die ich tun werde.

How to Create Animated GIFs from GSAP Animations

rasterisierte Daten in GIF

konvertieren

Dies ist der letzte Schritt, bei dem jeder Index des Canvasframes-Arrays an ein modernes GIF übergeben wird. 

<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="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" 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>

Verwenden von ModernGif.Codode können Sie ein Array von Daten an Frames übergeben und eine Verzögerung für jeden Frame definieren. Ich habe mich für eine Verzögerung von 0 Sekunden entschieden.

Der nächste Teil des Codes mit

Code verwandelt die Konvertiten von ModernGif.code -Daten und konvertieren sie in "einen anderen" MIME -Typ, diesmal Bild/GIF.

Sobald ich die letzten "Blob" -Daten für ein animiertes GIF habe, konvertiere ich sie in eine URL und setze dann die SRC und den HREF des Bild- und Linkelements fest, damit ich das GIF in meinem Browser anzeigen und herunterladen kann.

How to Create Animated GIFs from GSAP Animations

Bildrate

Sie können feststellen, dass das endgültige GIF ziemlich langsam läuft, da Animationen, die im Browser ausgeführt werden, normalerweise 60 Bilder pro Sekunde (FPS) spielen, während GIFs normalerweise bei 12 oder 24 fps viel langsamer sind.

Um einige Animationsrahmen zu entfernen, verwende ich Array -Filter und JavaScript -Restbetreiber, um festzustellen, ob der Index durch eine bestimmte Zahl teilbar sein kann. In meinem Fall wähle ich 6. Indizes, die durch 6 nicht teilbar sein können, werden aus dem Array herausgefiltert. Das generierte animierte GIF ist etwas ungeschickt, spielt aber viel schneller.

Ich habe die generateGif -Methode zur filter -Funktion hinzugefügt, um die Einstellung der Bildrate zu implementieren.

Das ist es, Sie können GSAP -SVG -Animationen über HTML -Leinwand in animierte GIFs konvertieren!

Wenn Sie Fragen zu allem haben, was in diesem Artikel beschrieben wird, können Sie mich gerne auf Twitter/x: @pauliescanlon finden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie animierte GIFs aus GSAP -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 运算符 xml Filter 递归 console href animation canvas github
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel： Master JQuery Ajax: Vollständige Anleitung zu asynchronen Anforderungen "Data-Gatsby-Head =" True "/> Nächster Artikel： Master JQuery Ajax: Vollständige Anleitung zu asynchronen Anforderungen "Data-Gatsby-Head =" True "/>

In Verbindung stehende Artikel

Mehr sehen