Cara Membuat GIF Animasi dari Animasi GSAP-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Cara Membuat GIF Animasi dari Animasi GSAP

Christopher Nolan

Feb 08, 2025 am 10:31 AM

Tukar animasi GSAP ke GIF animasi: panduan langkah demi langkah untuk menggunakan moden-gif

mata utama

Anda boleh menggunakan proses untuk menukar animasi GSAP ke dalam GIF animasi yang melibatkan menangkap data SVG dan menulisnya ke kanvas HTML setiap kali anda menyesuaikan tween. Data SVG ini kemudiannya boleh ditukar kepada data imej yang disusun, yang kemudiannya digunakan oleh GIF moden untuk membuat setiap bingkai gif animasi.
Proses penukaran melibatkan beberapa langkah, termasuk menangkap data SVG, menukar data SVG ke dalam data rasterisasi, dan akhirnya menukar data rasterisasi ke dalam GIF. Setiap langkah melibatkan pengubahsuaian kod tertentu dan penggunaan tatasusunan untuk menyimpan data yang ditangkap dan diubah.
Kerana kadar bingkai antara animasi penyemak imbas dan GIF biasanya berbeza, kadar bingkai gif akhir mungkin lebih lambat daripada animasi asal. Untuk mempercepatkan GIF, anda boleh menggunakan penapis array dan pengendali selebihnya JavaScript untuk menentukan sama ada indeks boleh dibahagikan dengan nombor, dengan itu membuang beberapa bingkai.

Artikel ini menerangkan cara menukar animasi yang dibuat menggunakan GSAP ke dalam GIF animasi menggunakan GIF moden.

Berikut adalah pratonton animasi yang saya buat sebelum ini:

How to Create Animated GIFs from GSAP Animations

Dalam pautan di bawah, anda boleh mencari pratonton langsung semua kod yang akan anda rujuk dalam artikel ini:

Indeks: GSAP-Animation-to-gif.netlify.app
Versi mudah: GSAP-Animation-to-gif.netlify.app/simple

⚙️ Code Base: github.com/pauliescanlon/gsap-animation-to-gif

Terdapat dua "halaman" dalam pangkalan kod. Indeks mengandungi semua kod untuk GIF di atas, mudah adalah titik permulaan untuk langkah -langkah yang diterangkan dalam artikel ini.

bagaimana untuk menukar animasi GSAP ke gif

Kaedah yang saya gunakan untuk menukar animasi GSAP ke GIF melibatkan menangkap data SVG dan menulisnya ke kanvas HTML pada setiap "kemas kini" tween. Sebaik sahaja tween selesai, saya boleh menukar data SVG ke dalam data imej yang disusun, yang boleh digunakan oleh moden-GIF untuk membuat setiap bingkai gif animasi.

pemula

Ini adalah kod yang saya gunakan dalam contoh mudah saya, dan saya akan menggunakannya untuk menerangkan setiap langkah yang diperlukan untuk membuat gif animasi dari animasi GSAP:

Langkah ini sedikit lebih rumit dan memerlukan satu operasi pada setiap indeks array AnimationFrames.

<!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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2 id="将-SVG-数据转换为光栅化数据">将 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' });

Dengan menggunakan fungsi rekursif rendersvgdatatocanvas, saya boleh menggunakan data imej dalam array AnimationFrame untuk menulisnya ke kanvas. Kemudian, dengan menggunakan canvas.todataurl ('image/jpeg'), saya dapat menyimpan data rasterisasi setiap bingkai animasi dalam array kanvas.

Jika anda telah menambah Console.log dalam fungsi onComplete, anda harus melihat sesuatu yang serupa dengan yang berikut dalam konsol penyemak imbas. Walau bagaimanapun, masa ini perhatikan jenis MIME data: ia bukan SVG XML, tetapi Imej/JPEG. Ini penting untuk kerja seterusnya yang akan saya lakukan.

~~Tukar data rasterisasi ke gif~~

Ini adalah langkah terakhir, yang melibatkan lulus setiap indeks array kanvas ke gif moden.

<!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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2 id="将-SVG-数据转换为光栅化数据">将 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' });

Menggunakan modengif.encode, anda boleh lulus pelbagai data ke bingkai dan menentukan kelewatan untuk setiap bingkai, saya memilih untuk menambah kelewatan 0 saat.

Bahagian seterusnya kod

mengendalikan menukarkan data modengif.ecode dan menukarnya kepada jenis mime "lain", kali ini imej/gif.

Sebaik sahaja saya mempunyai data "gumpalan" akhir yang mewakili GIF animasi, saya menukarnya ke URL dan kemudian menetapkan SRC dan HREF elemen imej dan pautan supaya saya dapat melihat dan memuat turun GIF dalam penyemak imbas saya.

How to Create Animated GIFs from GSAP Animations

kadar bingkai

Anda mungkin mendapati bahawa GIF akhir berjalan agak perlahan, kerana animasi yang berjalan di pelayar biasanya memainkan 60 bingkai sesaat (FPS) manakala GIF biasanya lebih perlahan pada 12 atau 24 fps.

Untuk "membuang" beberapa bingkai animasi, saya menggunakan penapis array dan pengendali selebihnya JavaScript untuk menentukan sama ada indeks itu boleh dibahagikan dengan nombor tertentu, dalam kes saya, saya pilih 6. Indeks yang tidak boleh dibahagikan dengan 6 akan ditapis dari array. GIF animasi yang dihasilkan agak kekok, tetapi ia lebih cepat.

Saya telah menambah kaedah

ke fungsi generateGif untuk melaksanakan pelarasan kadar bingkai. filter

itu sahaja, anda boleh menukar animasi GSAP SVG ke GIF animasi melalui kanvas HTML!

Jika anda mempunyai sebarang soalan mengenai apa -apa yang diterangkan dalam artikel ini, jangan ragu untuk mencari saya di Twitter/x: @pauliescanlon.

Atas ialah kandungan terperinci Cara Membuat GIF Animasi dari Animasi GSAP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

See all articles