ส่งออกหลังจากเอฟเฟกต์ภาพเคลื่อนไหวไปยัง HTML5

แอนิเมชันบนเว็บอยู่ที่นี่เพื่อพัก มันอยู่ในทุกสิ่งตั้งแต่การเคลื่อนไหวที่ละเอียดอ่อนที่ช่วยนำเรามา การออกแบบ UI เพื่อชีวิตเพื่อประสบการณ์ผ้าใบแบบเคลื่อนไหวอย่างเต็มที่และการทดลอง WebGL ที่ท้าทายสิ่งที่เราเคยคิดในเบราว์เซอร์

ในขณะที่ความคิดสร้างสรรค์ของ Devs และความสามารถของเบราว์เซอร์กำลังเพิ่มขึ้นภาพเคลื่อนไหวบนเว็บเป็นความสัมพันธ์ที่ไม่ดีต่อวิดีโอ - สิ่งที่ชุมชนกราฟิกเคลื่อนไหวได้เข้าใกล้ด้วยความระมัดระวังเป็นเวลาหลายปี จำไว้ว่าหากคุณมีไซต์ที่ซับซ้อนเพื่อรักษาของคุณ เว็บโฮสติ้ง บริการต้องอยู่ในจุด

• คำแนะนำเกี่ยวกับการออกแบบ UI

นักพัฒนาพึ่งพาห้องสมุดเช่น Greensock และ Snap.svg เพื่อทำการยกอย่างหนักในการสร้างภาพเคลื่อนไหวการทำซ้ำผ่าน JavaScript ในขณะที่เครื่องมือเหล่านี้ได้รับความยืดหยุ่นมากพวกเขาไม่สามารถเปรียบเทียบกับความแม่นยำและความละเอียดอ่อนของภาพเคลื่อนไหวที่สามารถทำได้ After Effects CC กราฟไทม์และกราฟการผ่อนคลายของตัวเอง จากมุมมองของเว็บหลังจากเอฟเฟกต์นั้นเหมาะอย่างยิ่งสำหรับการปรับแต่งและทดลองใช้การเคลื่อนไหวก่อนที่จะทำรหัส

ใส่ bodymovin ส่วนขยายที่ก้าวล้ำสำหรับ Adobe After Effects ที่ส่งออกแอนิเมชั่นโดยตรงจาก Effects ไปยัง JavaScript เพื่อแสดงและจัดการในเบราว์เซอร์ สร้างโดย Hernan Torrisi Bodymovin กำจัดอุปสรรคมากมายระหว่าง Animator และนักพัฒนา ในระดับฐานปลั๊กอินทำหน้าที่เป็นคุณสมบัติ 'แสดงผลของเว็บ' ที่มีมนต์ขลัง Adobe Forgot ที่ทันสมัยที่สุดมันจะเปิดโอกาสในความเป็นไปได้ใหม่สำหรับภาพเคลื่อนไหวแบบโต้ตอบ

Bodymovin เป็นลิงค์ในห่วงโซ่ของเครื่องมือปลั๊กอินและระบบที่เพิ่มขึ้นเพื่อตอบสนองความเป็นไปได้ใหม่เหล่านี้ Airbnb's Lottie และ คีย์เฟรมของ Facebook ทั้งสร้างบนฐานรากเหล่านี้ - และในที่สุดพวกเขาก็นำเครื่องมืออนิเมชั่นที่ทรงพลังที่สุดไปยังเว็บ

ทำไมต้องใช้ BODYMOVIN

SVG ยึดครองอินเทอร์เน็ตและนำมาด้วยความคาดหวังที่ทุกอย่างควรมีคุณภาพสูงแสงและปรับขนาดได้ Bodymovin แสดงให้เห็นทุกอย่างในองค์ประกอบของคุณเพื่อ SVG ที่คมชัดที่ทำให้คุณภาพของเวกเตอร์ได้ทุกขนาด ไม่มีการประนีประนอมอีกต่อไปที่จะทำให้ GIF เพิ่มขึ้นหรือบังคับให้ผู้ใช้ของคุณโหลดไฟล์วิดีโอที่บูดบึ้ง

เช่นเดียวกับการทำให้กระบวนการส่งออกภาพเคลื่อนไหวของคุณง่ายขึ้น Bodymovin เปิดโอกาสให้นักพัฒนามีความคิดสร้างสรรค์ด้วยประสบการณ์การโต้ตอบใหม่ ตรวจสอบ codepen สำหรับบางวิธีที่ยอดเยี่ยมส่วนขยายถูกนำมาใช้ - จาก Interactive IK Rigs ไปจนถึงข้อความโต้ตอบแบบโต้ตอบที่เคลื่อนไหวได้

เพื่อลดความซับซ้อนของกระบวนการ Dev เว็บของคุณให้ลอง สร้างเว็บไซต์ .

แอนิเมชั่นที่ส่งออกสามารถจัดการในเบราว์เซอร์เช่นเดียวกับองค์ประกอบอื่น ๆ ทำให้เรานึกถึงภาพเคลื่อนไหวในฐานะเครื่องมือแบบโต้ตอบและการทดลองในการออกแบบเว็บ และตอนนี้เป็นเพราะ Bodymovin นำภาพเคลื่อนไหวของคุณไปสู่เว็บได้ง่ายกว่าที่เคย ในบทช่วยสอนนี้คุณจะได้เรียนรู้วิธีการส่งออกภาพเคลื่อนไหวจาก After Effects และสร้างภาพเคลื่อนไหวการวนลูปอย่างง่าย ๆ ที่ตอบสนองต่อการคลิกของผู้ใช้

วิธีการเตรียมไฟล์ After Effects ของคุณ

การสนับสนุนสำหรับคุณสมบัติ After Effects ได้รับการปรับปรุงอย่างมากและคุณสามารถคาดหวังว่าจะได้รับผลลัพธ์ที่ดีที่ดีออกจากกล่อง ที่ถูกกล่าวว่าเลเยอร์ 3 มิติบินแฟนซีของคุณจะไม่เล่นดีดังนั้นโปรดระวังข้อ จำกัด ก่อนที่คุณจะเริ่มต้น ก่อนที่คุณจะเริ่มโครงการดาวน์โหลด Bodymovin เวอร์ชันล่าสุดเสมอและตรวจสอบหน้า GitHub เพื่อดูว่ามีคุณสมบัติใดบ้างที่รองรับในปัจจุบัน

อย่ารีบร้อนเกินไปที่จะก้าวไปสู่ส่วนที่สนุก ... ไฟล์ที่เป็นระเบียบทำให้จิตใจเป็นระเบียบเรียบร้อย ในกรณีนี้พวกเขาจะช่วยรับงานพิเศษบางส่วนออกจากเบราว์เซอร์และให้การเล่นที่เนียนเรียบ ประการแรกคุณจะต้องตรวจสอบให้แน่ใจว่าเนื้อหาของคุณอยู่ในชั้นรูปทรงเอฟเฟกต์สำหรับพลังงานเวกเตอร์เต็มรูปแบบ ในการแปลงไฟล์ Illustrator ใด ๆ ไปยัง Shape Layers คุณสามารถคลิกขวาที่คลิกขวาและเลือกสร้างรูปร่างจากเลเยอร์เวกเตอร์ เลเยอร์ใด ๆ ที่ไม่ใช่รูปร่างในขั้นตอนนี้จะถูกแปลงเป็นภาพและจะไม่แสดงผลเป็นเวกเตอร์

ถัดไปมีการตรวจสอบผ่านเลเยอร์และผู้สำเร็จการศึกษาของคุณ มีโอกาสที่ดีที่คุณสามารถทำให้เนื้อหาของรูปร่างง่ายขึ้นโดยไม่ต้องเสียสละอะไร พยายามลดจำนวนกลุ่มเส้นทางและเติมให้เป็นเพียงแค่สิ่งจำเป็นที่เปลือยเปล่า

ดูแลหน้ากาก

หน้ากากเป็นวิธีที่ง่ายในการเลื่อนขึ้นในขั้นตอนนี้ โปรดทราบว่าอัลฟ่ามาสก์จะทำงานร่วมกับ SVG Renderer แต่จะไม่ปรากฏหากคุณเลือกที่จะเปลี่ยนเป็นผืนผ้าใบ มาสก์สามารถมีราคาแพงในการทำงานดังนั้นให้ใช้อย่างมีประสิทธิภาพ

การแสดงผล

Bodymovin ทำงานในสองส่วน - ส่วนขยาย After Effects ที่แปลงข้อมูลภาพเคลื่อนไหวเป็นไฟล์ JSON และเครื่องเล่น BodyMovin.js เพื่อรวมไว้ในหน้าเว็บของคุณที่สามารถตีความไฟล์นี้และแสดงผลในเบราว์เซอร์

คิดว่าไฟล์ของคุณดีที่จะไป? เปิดส่วนขยาย BodyMovin ผ่านหน้าต่างและ GT; ส่วนขยายแล้ว bodymovin

เมื่อคุณกดรีเฟรชคุณจะเห็นรายการขององค์ประกอบทั้งหมดในโครงการ After Effects นี้ เลือกคอมพ์ที่คุณเลือกจากนั้นเลือกโฟลเดอร์ปลายทางภายในโครงการเว็บของคุณ เมื่อคุณมีความสุขเพียงแค่คลิกเรนเดอร์และดูเวทมนตร์ที่เกิดขึ้น เมื่อเสร็จแล้วคุณจะได้รับข้อความ 'เสร็จสิ้น' ขอแสดงความยินดี! คุณเพิ่งส่งออกไฟล์ JSON พร้อมข้อมูลทั้งหมดที่ผู้เล่นต้องการสร้างภาพเคลื่อนไหวสร้างใหม่

ในการทดสอบภาพเคลื่อนไหวที่ส่งออกใหม่ของคุณให้คลิกที่ Preview & GT; การแสดงผลปัจจุบันและจำไว้ว่าให้ขัดผิวผ่านไทม์ไลน์ในขณะที่คุณอาจพบสิ่งที่แตกต่างไปกับสิ่งที่คุณคาดหวังเล็กน้อย หากคุณพบปัญหาใด ๆ ที่จะกระโดดกลับและตรวจสอบเลเยอร์ของคุณ - อาจเป็นคุณสมบัติที่ไม่รองรับหรือนิพจน์ที่ใช้ใน After Effects

ปลั๊กอินบางอย่างหลังจากที่เอฟเฟกต์เช่นยางพาราตอนนี้รองรับ BodyMovin RubberHose ใช้ประโยชน์จากเลเยอร์ไกด์และเลเยอร์ที่ซ่อนอยู่ ในการเปิดใช้งานสิ่งเหล่านี้เพียงคลิกที่การตั้งค่า COG ถัดจากองค์ประกอบที่คุณเลือกและทำเครื่องหมายคุณสมบัติที่คุณต้องการ

หากทุกอย่างดูดีมีอีกหนึ่งสิ่งที่คุณต้องทำก่อนที่คุณจะออกจากผลที่อยู่เบื้องหลัง ในขั้นตอนนี้คุณควรมีข้อมูลที่สดใหม่ JSON อธิบายภาพเคลื่อนไหวของคุณ แต่ไม่มีผู้เล่น Bodymovin ตีความ ในส่วนขยายคลิกปุ่ม 'รับเครื่องเล่น' ที่ด้านบนขวาและบันทึกด้วยไฟล์ JSON ของคุณ

โหลดภาพเคลื่อนไหว

ตอนนี้คุณมีทุกสิ่งที่คุณต้องการมากระโดดเข้าสู่รหัสและวางพื้นฐานเพื่อรับภาพเคลื่อนไหวของคุณที่แสดงในหน้า

ก่อนอื่นให้ทำภาชนะใหม่ #anim_container เพื่อจับภาพเคลื่อนไหวของคุณ คุณต้องรวม bodymovin.js ไฟล์ก่อนที่จะปิดแท็กร่างกาย ถัดไปบอก Bodymovin ทุกอย่างเกี่ยวกับภาพเคลื่อนไหวของคุณและโหลดลงในตู้คอนเทนเนอร์ใหม่

ลองเดินผ่านขั้นตอนการตั้งค่าทีละขั้นตอน:

 var container = document.getElementbyid ('anim_container');
// ตั้งค่าภาพเคลื่อนไหวของเรา

var animdata = {
ภาชนะบรรจุ: ภาชนะ
renderer: 'SVG',
AutoPlay: จริง
ห่วง: จริง
เส้นทาง: 'data.json'
};
var anim = bodymovin.lobanimation (animdata); 

คุณต้องกำหนดพารามิเตอร์ทั้งหมดสำหรับภาพเคลื่อนไหว บอก Bodymovin คอนเทนเนอร์ที่คุณต้องการให้แอนิเมชั่นโหลดลงไปแล้วบอกให้แสดงภาพเคลื่อนไหวเป็นองค์ประกอบ SVG ต่อไปบอกอนิเมชั่นเพื่อเล่นทันทีที่โหลดและคุณต้องการให้มันวนกลับไปที่จุดเริ่มต้นเมื่อเสร็จแล้ว

คุณสมบัติ Path บอก Bodymovin Player ที่จะหาไฟล์ข้อมูล JSON สำหรับภาพเคลื่อนไหว เนื่องจากนโยบายการแบ่งปันทรัพยากร Cross-Origin (Cors) เทคนิคที่คุณใช้สำหรับการเข้าถึงไฟล์ JSON จะทำงานได้เฉพาะเมื่อคุณอยู่ในเซิร์ฟเวอร์หรือเซิร์ฟเวอร์ภายใน ในการทำงานในท้องถิ่นคุณสามารถทำให้ Data.json เป็นไฟล์ JavaScript ที่กำหนดวัตถุให้กับตัวแปร ในกรณีนั้นการตั้งค่าของคุณอาจมีลักษณะเช่นนี้:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; สคริปต์ & gt;
Var Container = Document.GetElementByID ('anim_container');
// ตั้งค่าภาพเคลื่อนไหวของเรา
var animdata = {
ภาชนะบรรจุ: ภาชนะ
renderer: 'SVG',
AutoPlay: จริง
ห่วง: จริง
AnimationData: ข้อมูล
};
var anim = bodymovin.loadanimation (animdata);
& lt; / สคริปต์ & gt; 

รีเฟรชหน้าและภาพเคลื่อนไหวของคุณควรเล่นภายในคอนเทนเนอร์ เลือกด้วยเครื่องมือ Dev ของคุณแล้วคุณจะเห็นว่าแต่ละองค์ประกอบในภาพเคลื่อนไหวมีอยู่ในนั้น & lt; g & gt; แท็กและกำลังถูกแปลงแบบเรียลไทม์

ดูน่าทึ่งใช่มั้ย ตอนนี้คุณควรมีภาพเคลื่อนไหวที่สวยงามและคมชัดแสดงในเบราว์เซอร์ (ไม่มีแท็กวิดีโอที่น่าสังเวชในสายตา ... ) แอนิเมชั่นจะปรับขนาดให้พอดีกับภาชนะของมันเสมอดังนั้นไปข้างหน้าและระเบิดมัน!

Bodymovin มีวิธีการที่มีประสิทธิภาพหลากหลายสำหรับการควบคุมภาพเคลื่อนไหวหลังจากที่โหลดแล้ว เรียกวิธีการเช่น anim.pause () หรือ Anim.SetDirection () จะช่วยให้คุณสามารถจัดการการเล่นในรูปแบบที่แตกต่างกัน ลองดูตัวอย่างบางส่วน:

• Anim.SetDirection (-1) จะเล่นนิเมชั่นในการย้อนกลับ
• anim.pause () และ anim.play () จะเริ่มและหยุดนิเมชั่น
• Anim.SetSpeed ​​(0.5) จะเล่นภาพเคลื่อนไหวที่ความเร็วครึ่งหนึ่ง

เพิ่มปฏิสัมพันธ์

ในขั้นตอนต่อไปนี้คุณจะสำรวจวิธีต่าง ๆ ในการเพิ่มการโต้ตอบกับภาพเคลื่อนไหวของคุณผ่าน JavaScript ในตัวอย่างนี้เราส่งออกภาพเคลื่อนไหว After Effects ด้วยสองส่วน: ส่วน A และส่วน B. ส่วนการใช้งานเฟรมจากหนึ่งถึง 20 (สามเหลี่ยมถือ Pogo Stick) ส่วน B ใช้เฟรมตั้งแต่ 20 ถึง 40 (สามเหลี่ยมกำลังกระโดดขึ้นและลง บน Pogo Stick)

ตอนนี้คุณต้องการเล่นในส่วน A บนลูปแล้ว (หลังจากการคลิกของผู้ใช้เท่านั้น) การเล่นและห่วงส่วน B. คุณสามารถใช้ประโยชน์จากคุณสมบัติ PlaySegments เพื่อแยกแอนิเมชั่นขึ้นมาด้วยวิธีนี้ วิธีนี้จะใช้ข้อโต้แย้งสองข้อ - อาร์เรย์ที่มีค่าเริ่มต้นและสิ้นสุดและบูลีนที่สอง - isframe การตั้งค่านี้เป็นจริงจะบอกภาพเคลื่อนไหวในการอ่านค่าเริ่มต้นและจุดสิ้นสุดเป็นเฟรมในขณะที่เท็จจะบอกให้อ่านค่าเหล่านี้เป็นเวลา

 anim.pause ();
Anim.playsegments ([0,20], True); 

การเพิ่มสิ่งนี้บอก bodymovin เพื่อหยุดชั่วคราวที่เฟรมแรกและเล่นเพียงแค่ภาพเคลื่อนไหวจาก 0 ถึง 20 เฟรม ในขณะที่คุณตั้งค่าภาพเคลื่อนไหวของคุณด้วย ลูป: จริง คุณสมบัตินี้จะเล่นต่อไปอีกครั้งและอีกครั้ง

ลองตั้งค่าตัวอย่างทั้งหมด คุณจะใช้ฉากนิเมชั่นสองส่วนสำหรับตัวอย่างนี้ดังนั้นคุณจะสร้างสองฟังก์ชั่น:

 var container = document.getElementbyid ('anim_container');
// ตั้งค่าภาพเคลื่อนไหวของเรา
var animdata = {
ภาชนะบรรจุ: ภาชนะ
renderer: 'SVG',
AutoPlay: FALSE,
ห่วง: จริง
เส้นทาง: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// เมื่อโหลดภาพเคลื่อนไหวเรียกใช้ฟังก์ชั่น firstloop ของเรา
anim.addeventristener ('domloaded', firstloop);
// สร้างฟังก์ชั่นการเล่นของเรา
ฟังก์ชั่น firstloop () {
anim.playsegments ([0,20], จริง);
};
ฟังก์ชั่น secondloop () {
Anim.playsegments ([20,40], TRUE);
};
// ฟังเหตุการณ์การคลิก
container.addeventlistener ('คลิก', ฟังก์ชั่น (เหตุการณ์) {
Anim.addeventristener ('loopcomplete', Secondloop);
}); 

ทางที่จะไป! ตอนนี้แอนิเมชั่นของคุณจะวนวนต่อไปจนกว่าผู้ใช้จะคลิกมันจะเริ่มวนรอบที่สอง ปัญหาเดียวในขณะนี้คือการกระโดดเช่นนี้ฉับพลันมากและสามารถทำลายความราบรื่นของภาพเคลื่อนไหวได้

สถานการณ์ในอุดมคติคือการรวมส่วนที่สามไปยังภาพเคลื่อนไหวหนึ่งที่เปลี่ยนจากการถือ Pogo Stick เพื่อกระโดดบนมัน ตอนนี้โครงสร้างของคุณจะมีลักษณะเช่นนี้:

• คนแรก - เฟรม 0 ถึง 20
• การเปลี่ยนแปลง - กรอบ 20 ถึง 30
• คนที่สอง - กรอบ 30 ถึง 50

เราต้องการภาพเคลื่อนไหวของคุณที่จะอยู่ในลูปแรกจนกว่าจะคลิก ณ จุดนั้นคุณจะต้องรอการสิ้นสุดของลูปที่คุณอยู่ในขณะนี้และย้ายไปสู่การเปลี่ยนแปลง หลังจากการเปลี่ยนแปลงเสร็จสิ้นการย้ายไปที่วงที่สองของคุณ ฟังดูซับซ้อน แต่อยู่กับฉัน! นี่คือรหัสของคุณในแบบเต็ม:

 var container = document.getElementbyid ('anim_container');
// ตั้งค่าภาพเคลื่อนไหวของเรา
var animdata = {
ภาชนะบรรจุ: ภาชนะ
renderer: 'SVG',
AutoPlay: FALSE,
ห่วง: จริง
เส้นทาง: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// เมื่อโหลดภาพเคลื่อนไหวเรียกใช้ฟังก์ชั่น firstloop ของเรา
anim.addeventristener ('domloaded', firstloop);
// สร้างฟังก์ชั่นการเล่นของเรา
ฟังก์ชั่น firstloop () {
anim.playsegments ([0,20], จริง);
};
ฟังก์ชั่นการเปลี่ยน () {
Anim.playsegments ([20,30], TRUE);
anim.removeeventlistener ('loopcomplete');
Anim.addeventristener ('loopcomplete', Secondloop);
};
ฟังก์ชั่น secondloop () {
Anim.playsegments ([30,100], TRUE);
anim.removeeventlistener ('loopcomplete');
};
// ฟังเหตุการณ์การคลิก
container.addeventlistener ('คลิก', ฟังก์ชั่น (เหตุการณ์) {
anim.addeventristener ('loopcomplete', การเปลี่ยนแปลง);
}); 

เมื่อคลิกคุณใช้ loopcomplete ผู้ฟังรอจนกว่าคุณจะถึงกรอบสุดท้ายของลูปแล้วให้เรียกใช้ การเปลี่ยนแปลง () ฟังก์ชั่น. ที่นี่คุณลบผู้ฟังล่าสุดเล่นชุดถัดไปของเฟรมแล้วทำเช่นเดียวกันอีกครั้ง หลังจากการเปลี่ยนแปลงเสร็จแล้วมันจะโทร secondloop () .

แค่นั้นแหละ!

คุณเคยทำงานกับคุณสมบัติบางอย่างของ Bodymovin วันนี้ แต่ถ้าคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับปลั๊กอินคุณสามารถค้นหาข้อมูลเกี่ยวกับ Bodymovin GitHub หน้า. สำหรับตัวอย่างเพิ่มเติมให้ตรวจสอบคอลเล็กชัน Codepen Bodymovin ที่น่าประทับใจ

หวังว่าบทช่วยสอนนี้จะให้ความคิดเกี่ยวกับวิธีการต่าง ๆ ที่คุณสามารถรวมการใช้งานหลังเอฟเฟกต์และ Bodymovin เพื่อสร้างภาพเคลื่อนไหว Supercool บางอย่างสำหรับเว็บ!

ตอนนี้คุณสามารถตั้งค่าภาพเคลื่อนไหวที่จะส่งออกสำหรับเว็บนำไฟล์ส่งออกของคุณลงในเบราว์เซอร์และทำให้แอนิเมชั่นของคุณตอบสนองต่อการคลิก คิดว่านอกเหนือจากไฟล์ MP4 ที่คุณเคยใช้ก่อนหน้านี้และมองหา Bodymovin เพื่อสร้างประสบการณ์การใช้งานเว็บที่สมบูรณ์ยิ่งขึ้นในอนาคต

ความสามารถในการมีส่วนเกี่ยวข้องกับอนิเมเตอร์อย่างใกล้ชิดในกระบวนการพัฒนากำลังมีความสำคัญมากขึ้นเรื่อย ๆ และสาขาแอนิเมชั่นของเว็บกำลังเคลื่อนที่อย่างรวดเร็วอย่างไม่น่าเชื่อ ด้วยคอลเลกชันที่เพิ่มมากขึ้นของส่วนขยายใหม่ปลั๊กอินและกรอบงานอนิเมเตอร์และนักพัฒนาสามารถคาดหวังว่ากระบวนการนี้จะง่ายขึ้นและดีขึ้นเมื่อเวลาผ่านไป ฉันรอไม่ไหวที่จะดูว่าอนาคตมีอะไรอยู่

มีไฟล์จำนวนมากเพื่อสำรองข้อมูลหรือไม่ ตรวจสอบของเรา การจัดเก็บเมฆ เลือก

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ในปี 2560 สมัครสมาชิกที่นี่ .

อ่านเพิ่มเติม:

• สร้างและเคลื่อนไหว Molygons SVG
• 14 Adobe ที่น่าตื่นตาตื่นใจ หลังจากที่เอฟเฟกต์ปลั๊กอิน
• สร้างกระดานเรื่องราวสำหรับเว็บแอนิเมชั่น