Comment créer des GIF animés à partir d'animations GSAP-js tutoriel-php.cn

Convertir les animations GSAP en gifs animés: un guide étape par étape pour utiliser les gifs modernes

Points clés

Vous pouvez utiliser un processus pour convertir les animations GSAP en GIF animés qui impliquent de capturer les données SVG et de les écrire sur le toile HTML à chaque fois que vous ajustez le Tween. Ces données SVG peuvent ensuite être converties en données d'image rasterisées, qui est ensuite utilisée par le GIF moderne pour créer chaque trame du GIF animé.
Le processus de conversion implique plusieurs étapes, notamment la capture des données SVG, la conversion des données SVG en données rasterisées, et enfin la conversion des données rasterisées en GIF. Chaque étape implique des modifications de code spécifiques et l'utilisation de tableaux pour stocker des données capturées et transformées.
Parce que les fréquences d'images entre les animations du navigateur et les GIF sont généralement différentes, les fréquences d'images des GIF finaux peuvent être plus lentes que l'animation originale. Pour accélérer les GIF, vous pouvez utiliser des filtres à tableau et des opérateurs de reste JavaScript pour déterminer si l'index peut être divisible par un nombre, jetant ainsi certaines cadres.

Cet article explique comment convertir les animations créées à l'aide de GSAP en GIF animés à l'aide du GIF moderne.

Ce qui suit est un aperçu d'une animation que j'ai faite avant:

How to Create Animated GIFs from GSAP Animations

Dans le lien ci-dessous, vous pouvez trouver un aperçu en direct de tout le code auquel vous vous référerez dans cet article:

? Aperçu:
- Index: gsap-animation-to-nif.netlify.app
- Version simple: gsap-animation-to-gif.netlify.app/simple
⚙️ Base de code: github.com/pauliescanlon/gsap-animation-to-gif

Il y a deux "pages" dans la base de code. L'index contient tout le code pour le GIF ci-dessus, Simple est le point de départ des étapes décrites dans cet article.

comment convertir l'animation GSAP en gif

La méthode que j'utilise pour convertir les animations GSAP en GIFS implique de capturer les données SVG et de l'écrire en une toile HTML à chaque "mise à jour" de la Tween. Une fois le Tween terminé, je peux convertir les données SVG en données d'image rasterisées, que moderne-GIF peut utiliser pour créer chaque trame d'un GIF animé.

débutant

C'est le code que j'ai utilisé dans mon exemple simple, et je l'utiliserai pour expliquer chaque étape requise pour créer un GIF animé à partir d'une animation GSAP:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8' />
  <title>Simple</title>
</head>
<body>
  <main>
    <svg id='svg'
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 400 200'
      width={400}
      height={200}
      style={{ border: '1px solid red' }}
    >
      <rect id='rect' x='0' y='75' width='50' height='50' fill='red'></rect>
    </svg>
    <canvas id='canvas' style={{ border: '1px 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 " /></p>
<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' });

Copier après la connexion

Cette étape est un peu plus compliquée et nécessite une opération sur chaque index du tableau AnimationFrames.

En utilisant la fonction récursive RendersvgDatatocanvas, je peux utiliser les données d'image dans le tableau AnimationFrames pour l'écrire dans la toile. Ensuite, en utilisant canvas.todataurl ('image / jpeg'), je peux stocker les données rasterisées de chaque trame de l'animation dans le tableau Canvasframes.

Si vous avez ajouté Console.log dans la fonction OnComplete, vous devriez voir quelque chose de similaire à ce qui suit dans la console du navigateur. Cependant, cette fois, notez le type MIME des données: ce n'est pas SVG XML, mais Image / JPEG. Ceci est important pour le prochain travail que je ferai.

How to Create Animated GIFs from GSAP Animations

Convertir les données rasterisées en gif

Il s'agit de la dernière étape, qui consiste à passer chaque index du tableau Canvasframes à un GIF moderne.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8' />
  <title>Simple</title>
</head>
<body>
  <main>
    <svg id='svg'
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 400 200'
      width={400}
      height={200}
      style={{ border: '1px solid red' }}
    >
      <rect id='rect' x='0' y='75' width='50' height='50' fill='red'></rect>
    </svg>
    <canvas id='canvas' style={{ border: '1px 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 " /></p>
<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' });

Copier après la connexion

En utilisant moderngif.encode, vous pouvez passer un tableau de données dans les cadres et définir un retard pour chaque trame, j'ai choisi d'ajouter un retard de 0 seconde.

La partie suivante du code

gère la conversion des données ModernGif.Ecode et la convertir en "un autre" type MIME, cette image d'image / GIF.

Une fois que j'ai les données "blob" finales représentant un GIF animé, je le convertisse en URL, puis je définis le SRC et le HREF des éléments d'image et de liaison afin que je puisse afficher et télécharger le GIF dans mon navigateur.

How to Create Animated GIFs from GSAP Animations

fréquence d'images

Vous pouvez remarquer que le GIF final fonctionne assez lentement, car les animations fonctionnant dans le navigateur jouent généralement 60 images par seconde (FPS) tandis que les GIF sont généralement beaucoup plus lents à 12 ou 24 ips.

Pour "rejeter" certaines cadres d'animation, j'utilise des filtres à tableau et des opérateurs de reste javascript pour déterminer si l'index peut être divisible par un certain nombre, dans mon cas, je choisis 6. Les index qui ne peuvent pas être divisibles par 6 seront filtrés du tableau. Le gif animé généré est un peu maladroit, mais il joue beaucoup plus rapidement.

J'ai ajouté la méthode generateGif à la fonction filter pour implémenter l'ajustement de la fréquence d'images.

C'est tout, vous pouvez convertir les animations GSAP SVG en gifs animés via HTML Canvas!

Si vous avez des questions sur tout ce qui est décrit dans cet article, n'hésitez pas à me trouver sur Twitter / X: @PauliesCanlon.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!