Tukar animasi GSAP ke GIF animasi: panduan langkah demi langkah untuk menggunakan moden-gif
mata utama
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:
bagaimana untuk menukar animasi GSAP ke gif
pemula
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="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' });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.
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="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' });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 kodmengendalikan 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.
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
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!
Perbezaan antara drop dan delete
Bagaimana untuk mengalih keluar beberapa elemen pertama tatasusunan dalam php
10 pertukaran mata wang teratas
Kekunci pintasan penukaran tetingkap
pelayan web
Bagaimana untuk menyelesaikan masalah bahawa port phpstudy diduduki
Pengenalan kepada perisian kalkulator dalam talian
Alat penilaian temu bual
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
