gsap.timeline({\n onUpdate: () => {\n const xml = new XMLSerializer().serializeToString(svg);\n const src = `data:image\/svg+xml;base64,${btoa(xml)}`;\n animationFrames.push(src);\n },\n onComplete: () => {\n let inc = 0;\n const renderSvgDataToCanvas = () => {\n const virtualImage = new Image();\n virtualImage.src = animationFrames[inc];\n virtualImage.onload = () => {\n ctx.clearRect(0, 0, 400, 200);\n ctx.drawImage(virtualImage, 0, 0, 400, 200);\n canvasFrames.push(canvas.toDataURL('image\/jpeg'));\n inc++;\n if (inc < animationFrames.length) {\n renderSvgDataToCanvas();\n } else {\n \/\/console.log(canvasFrames); \/\/調(diào)試用\n generateGif();\n }\n };\n };\n renderSvgDataToCanvas();\n },\n})\n.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });<\/pre>\n 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. <\/p>\n
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. <\/p>\n
<\/p> Tukar data rasterisasi ke gif <\/h2>\n
Ini adalah langkah terakhir, yang melibatkan lulus setiap indeks array kanvas ke gif moden. <\/p>\n
\n\n\n \n Simple<\/title>\n<\/head>\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <main>\n <svg id='svg'\n xmlns='http:\/\/www.w3.org\/2000\/svg'\n viewBox='0 0 400 200'\n width={400}\n height={200}\n style={{ border: '1px solid red' }}\n >\n <rect id='rect' x='0' y='75' width='50' height='50' fill='red'><\/rect>\n <\/svg>\n <canvas id='canvas' style={{ border: '1px solid blue' }} width={400} height={200}><\/canvas>\n <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173898187373194.jpg\" alt=\"How to Create Animated GIFs from GSAP Animations \" \/><\/p>\n<h2>將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)<\/h2>\n<pre><code class=\"language-javascript\">gsap.timeline({\n onUpdate: () => {\n const xml = new XMLSerializer().serializeToString(svg);\n const src = `data:image\/svg+xml;base64,${btoa(xml)}`;\n animationFrames.push(src);\n },\n onComplete: () => {\n let inc = 0;\n const renderSvgDataToCanvas = () => {\n const virtualImage = new Image();\n virtualImage.src = animationFrames[inc];\n virtualImage.onload = () => {\n ctx.clearRect(0, 0, 400, 200);\n ctx.drawImage(virtualImage, 0, 0, 400, 200);\n canvasFrames.push(canvas.toDataURL('image\/jpeg'));\n inc++;\n if (inc < animationFrames.length) {\n renderSvgDataToCanvas();\n } else {\n \/\/console.log(canvasFrames); \/\/調(diào)試用\n generateGif();\n }\n };\n };\n renderSvgDataToCanvas();\n },\n})\n.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });<\/pre>\n<p> Menggunakan modengif.encode, anda boleh lulus pelbagai data ke bingkai dan menentukan kelewatan untuk setiap bingkai, saya memilih untuk menambah kelewatan 0 saat. <\/p>\nBahagian seterusnya kod <p> mengendalikan menukarkan data modengif.ecode dan menukarnya kepada jenis mime \"lain\", kali ini imej\/gif. <\/p>\n<p> 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. <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173898187673605.jpg\" alt=\"How to Create Animated GIFs from GSAP Animations \"> <s>\n<\/s><\/p> kadar bingkai <h2>\n<\/h2> 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. <p>\n<\/p> 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. <p>\n<\/p> Saya telah menambah kaedah <p> ke fungsi <code>generateGif<\/code> untuk melaksanakan pelarasan kadar bingkai. <code>filter<\/code>\n<\/p> itu sahaja, anda boleh menukar animasi GSAP SVG ke GIF animasi melalui kanvas HTML! <p>\n<\/p> Jika anda mempunyai sebarang soalan mengenai apa -apa yang diterangkan dalam artikel ini, jangan ragu untuk mencari saya di Twitter\/x: @pauliescanlon. <p><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://www.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://www.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://www.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://www.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://www.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://www.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Jadual Kandungan</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#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" title=" 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. " > 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. </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#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" title=" 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: " > 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: </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Tukar-data-rasterisasi-ke-gif" title=" Tukar data rasterisasi ke gif " > Tukar data rasterisasi ke gif </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/js-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial js</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Cara Membuat GIF Animasi dari Animasi GSAP</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Cara Membuat GIF Animasi dari Animasi GSAP</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ms/member/1468496.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea80d78848b538.png" src="/static/imghw/default1.png" alt="Christopher Nolan">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ms/member/1468496.html" class="author_name">Christopher Nolan</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 10:31 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> Tukar animasi GSAP ke GIF animasi: panduan langkah demi langkah untuk menggunakan moden-gif </p>
<p> <strong> mata utama </strong> </p>
<ul>
<li> 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. </li>
<li> 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. </li>
<li> 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. </li>
</ul>
<p> Artikel ini menerangkan cara menukar animasi yang dibuat menggunakan GSAP ke dalam GIF animasi menggunakan GIF moden. </p>
<p> Berikut adalah pratonton animasi yang saya buat sebelum ini: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187154231.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations "> <s>
</s></p> Dalam pautan di bawah, anda boleh mencari pratonton langsung semua kod yang akan anda rujuk dalam artikel ini: <p>
</p>
<ul>?
<li> Indeks: GSAP-Animation-to-gif.netlify.app <sh>
<li> Versi mudah: GSAP-Animation-to-gif.netlify.app/simple </li>
<li>
</li>
</sh>
</li>
</ul> ?? Code Base: github.com/pauliescanlon/gsap-animation-to-gif
<li>
</li> 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.
<p> bagaimana untuk menukar animasi GSAP ke gif </p>
<h2 id="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"> 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. </h2>
<p> pemula </p>
<h2 id="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"> 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: </h2>
<p>
</p> Langkah ini sedikit lebih rumit dan memerlukan satu operasi pada setiap indeks array AnimationFrames. <pre class='brush:php;toolbar:false;'><!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/imghw/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 " /></p>
<h2>將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)</h2>
<pre class="brush:php;toolbar:false"><code class="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); //調(diào)試用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });</pre>
<p> 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. </p>
<p> 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. </p>
<p> </p> <s><h2 id="Tukar-data-rasterisasi-ke-gif"> Tukar data rasterisasi ke gif </h2>
<p> Ini adalah langkah terakhir, yang melibatkan lulus setiap indeks array kanvas ke gif moden. </p>
<pre class='brush:php;toolbar:false;'><!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/imghw/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 " /></p>
<h2>將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)</h2>
<pre class="brush:php;toolbar:false"><code class="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); //調(diào)試用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });</pre>
<p> Menggunakan modengif.encode, anda boleh lulus pelbagai data ke bingkai dan menentukan kelewatan untuk setiap bingkai, saya memilih untuk menambah kelewatan 0 saat. </p>
Bahagian seterusnya kod <p> mengendalikan menukarkan data modengif.ecode dan menukarnya kepada jenis mime "lain", kali ini imej/gif. </p>
<p> 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. </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187673605.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations "> <s>
</s></p> kadar bingkai <h2>
</h2> 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. <p>
</p> 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. <p>
</p> Saya telah menambah kaedah <p> ke fungsi <code>generateGif</code> untuk melaksanakan pelarasan kadar bingkai. <code>filter</code>
</p> itu sahaja, anda boleh menukar animasi GSAP SVG ke GIF animasi melalui kanvas HTML! <p>
</p> Jika anda mempunyai sebarang soalan mengenai apa -apa yang diterangkan dalam artikel ini, jangan ragu untuk mencari saya di Twitter/x: @pauliescanlon. <p></p><p>Atas ialah kandungan terperinci Cara Membuat GIF Animasi dari Animasi GSAP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>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</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8638</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1784</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1580</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1445</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796822063.html" title="Java vs JavaScript: Membersihkan kekeliruan" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs JavaScript: Membersihkan kekeliruan" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796822063.html" title="Java vs JavaScript: Membersihkan kekeliruan" class="phphistorical_Version2_mids_title">Java vs JavaScript: Membersihkan kekeliruan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821632.html" title="Komen JavaScript: Penjelasan ringkas" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Komen JavaScript: Penjelasan ringkas" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821632.html" title="Komen JavaScript: Penjelasan ringkas" class="phphistorical_Version2_mids_title">Komen JavaScript: Penjelasan ringkas</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span>
<p class="Articlelist_txts_p">JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796827639.html" title="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796827639.html" title="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" class="phphistorical_Version2_mids_title">Bagaimana untuk bekerja dengan tarikh dan masa di JS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:27 AM</span>
<p class="Articlelist_txts_p">Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796828200.html" title="Kenapa anda harus meletakkan tag di bahagian bawah ?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kenapa anda harus meletakkan tag di bahagian bawah ?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796828200.html" title="Kenapa anda harus meletakkan tag di bahagian bawah ?" class="phphistorical_Version2_mids_title">Kenapa anda harus meletakkan tag di bahagian bawah ?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:22 AM</span>
<p class="Articlelist_txts_p">PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796822037.html" title="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796822037.html" title="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" class="phphistorical_Version2_mids_title">JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span>
<p class="Articlelist_txts_p">JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796822137.html" title="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796822137.html" title="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" class="phphistorical_Version2_mids_title">JavaScript: Meneroka jenis data untuk pengekodan yang cekap</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:46 AM</span>
<p class="Articlelist_txts_p">JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796828191.html" title="Apakah peristiwa yang menggelegak dan menangkap di Dom?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah peristiwa yang menggelegak dan menangkap di Dom?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796828191.html" title="Apakah peristiwa yang menggelegak dan menangkap di Dom?" class="phphistorical_Version2_mids_title">Apakah peristiwa yang menggelegak dan menangkap di Dom?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span>
<p class="Articlelist_txts_p">Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796820615.html" title="Apa perbezaan antara Java dan JavaScript?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa perbezaan antara Java dan JavaScript?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796820615.html" title="Apa perbezaan antara Java dan JavaScript?" class="phphistorical_Version2_mids_title">Apa perbezaan antara Java dan JavaScript?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 17, 2025 am 09:17 AM</span>
<p class="Articlelist_txts_p">Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.</p>
</div>
</div>
<a href="http://www.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://www.miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://www.miracleart.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="4ki2i" class="pl_css_ganrao" style="display: none;"><fieldset id="4ki2i"></fieldset><del id="4ki2i"></del><menu id="4ki2i"><tbody id="4ki2i"><noframes id="4ki2i"></noframes></tbody></menu><th id="4ki2i"></th><strong id="4ki2i"></strong><tr id="4ki2i"></tr><object id="4ki2i"><rt id="4ki2i"><kbd id="4ki2i"></kbd></rt></object><abbr id="4ki2i"></abbr><center id="4ki2i"></center><s id="4ki2i"></s><object id="4ki2i"><button id="4ki2i"><object id="4ki2i"></object></button></object><small id="4ki2i"><code id="4ki2i"><pre id="4ki2i"></pre></code></small><cite id="4ki2i"><dl id="4ki2i"><pre id="4ki2i"></pre></dl></cite><tbody id="4ki2i"></tbody><tbody id="4ki2i"></tbody><center id="4ki2i"></center><th id="4ki2i"><li id="4ki2i"><tbody id="4ki2i"></tbody></li></th><optgroup id="4ki2i"></optgroup><delect id="4ki2i"></delect><abbr id="4ki2i"></abbr><strong id="4ki2i"><sup id="4ki2i"><menu id="4ki2i"></menu></sup></strong><code id="4ki2i"></code><button id="4ki2i"><abbr id="4ki2i"><dl id="4ki2i"></dl></abbr></button><nav id="4ki2i"><tfoot id="4ki2i"><tr id="4ki2i"></tr></tfoot></nav><bdo id="4ki2i"></bdo><sup id="4ki2i"></sup><tbody id="4ki2i"></tbody><bdo id="4ki2i"></bdo><source id="4ki2i"></source><th id="4ki2i"></th><em id="4ki2i"></em><bdo id="4ki2i"></bdo><center id="4ki2i"></center><strong id="4ki2i"></strong><li id="4ki2i"></li><menu id="4ki2i"></menu><del id="4ki2i"></del><fieldset id="4ki2i"><dd id="4ki2i"><nav id="4ki2i"></nav></dd></fieldset><center id="4ki2i"><pre id="4ki2i"><s id="4ki2i"></s></pre></center><noframes id="4ki2i"><source id="4ki2i"><dd id="4ki2i"></dd></source></noframes><li id="4ki2i"><rt id="4ki2i"><del id="4ki2i"></del></rt></li><pre id="4ki2i"></pre><rt id="4ki2i"><del id="4ki2i"><abbr id="4ki2i"></abbr></del></rt><tr id="4ki2i"></tr><acronym id="4ki2i"></acronym><blockquote id="4ki2i"></blockquote><fieldset id="4ki2i"></fieldset><tfoot id="4ki2i"></tfoot><optgroup id="4ki2i"></optgroup><pre id="4ki2i"></pre><button id="4ki2i"><abbr id="4ki2i"><wbr id="4ki2i"></wbr></abbr></button><sup id="4ki2i"></sup><li id="4ki2i"><input id="4ki2i"><tr id="4ki2i"></tr></input></li><sup id="4ki2i"></sup><menu id="4ki2i"></menu><tfoot id="4ki2i"></tfoot><tr id="4ki2i"><menu id="4ki2i"><acronym id="4ki2i"></acronym></menu></tr><strike id="4ki2i"><ul id="4ki2i"><table id="4ki2i"></table></ul></strike><input id="4ki2i"><blockquote id="4ki2i"><bdo id="4ki2i"></bdo></blockquote></input><bdo id="4ki2i"></bdo><s id="4ki2i"><td id="4ki2i"><tr id="4ki2i"></tr></td></s><abbr id="4ki2i"></abbr><tfoot id="4ki2i"><del id="4ki2i"><abbr id="4ki2i"></abbr></del></tfoot><source id="4ki2i"></source><center id="4ki2i"><abbr id="4ki2i"><s id="4ki2i"></s></abbr></center><abbr id="4ki2i"></abbr><strong id="4ki2i"></strong><wbr id="4ki2i"></wbr><kbd id="4ki2i"><strong id="4ki2i"><center id="4ki2i"></center></strong></kbd><tr id="4ki2i"></tr><rt id="4ki2i"></rt><center id="4ki2i"><dl id="4ki2i"><blockquote id="4ki2i"></blockquote></dl></center><button id="4ki2i"></button><strong id="4ki2i"></strong><kbd id="4ki2i"></kbd><strike id="4ki2i"></strike><object id="4ki2i"></object><center id="4ki2i"><nav id="4ki2i"><strike id="4ki2i"></strike></nav></center><acronym id="4ki2i"></acronym><abbr id="4ki2i"><dl id="4ki2i"><pre id="4ki2i"></pre></dl></abbr><center id="4ki2i"><input id="4ki2i"><s id="4ki2i"></s></input></center><strike id="4ki2i"></strike><ul id="4ki2i"></ul><source id="4ki2i"></source><cite id="4ki2i"></cite><tbody id="4ki2i"></tbody><xmp id="4ki2i"><samp id="4ki2i"><code id="4ki2i"></code></samp></xmp><tfoot id="4ki2i"></tfoot><dfn id="4ki2i"></dfn><pre id="4ki2i"><noframes id="4ki2i"><source id="4ki2i"></source></noframes></pre><source id="4ki2i"></source><optgroup id="4ki2i"></optgroup><th id="4ki2i"></th><dl id="4ki2i"></dl><strike id="4ki2i"><dfn id="4ki2i"><table id="4ki2i"></table></dfn></strike><button id="4ki2i"></button><blockquote id="4ki2i"></blockquote><td id="4ki2i"><acronym id="4ki2i"><tbody id="4ki2i"></tbody></acronym></td><input id="4ki2i"></input></div>
</html>