ฉันมีภาพประกอบสองสามเล่มที่วาดไว้ใน Illustrator และฉันวางแผนที่จะสร้างภาพเคลื่อนไหวสำหรับเว็บไซต์ที่ฉันกำลังทำงานอยู่ฉันได้ยินชื่อชุดเครื่องมือCreate.jsพร้อมแฟลช แต่มันเป็นวิธีที่ดีที่สุดที่จะไปหรือมีอีก " วิธีที่ดีกว่าในการทำ?
นี่คือตัวอย่างของประเภทของภาพเคลื่อนไหวที่ฉันต้องการ: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
คำตอบ:
มีหลายวิธีในการสร้างภาพเคลื่อนไหวบนเว็บ มีวิธีมากขึ้นในการสร้างภาพเคลื่อนไหวจากนั้นส่งออกไปยังภาพเคลื่อนไหวบนเว็บ
มีประโยชน์อย่างมากในการออกแบบภาพเคลื่อนไหวในบางสิ่งเช่น AfterEffects หรือ Animate CC (ซึ่งสามารถนำเข้าไฟล์ Illustrator และ Photoshop) ได้ด้วยเหตุผลที่ชัดเจนของการแบ่งงานและการใช้โปรแกรมแก้ไขกราฟิก
กับที่ถูกกล่าวว่าคุณควรจะเสมอในท้ายที่สุดแล้วรวบรวมไปหนึ่งต่อไปนี้ :
ความสามารถในการโต้ตอบ จำกัด :
โต้ตอบได้อย่างสมบูรณ์มากขึ้น:
ตอนนี้ฉันจะเข้าไปดูรายละเอียดเพิ่มเติมเล็กน้อย
GIF เป็นวิธีที่ดีในการดำเนินการเมื่อภาพเคลื่อนไหวไม่ต้องการการโต้ตอบมากไม่จำเป็นต้องปรับขนาดแบบไดนามิกและมีขนาดค่อนข้างเล็ก GIF ที่ทำมาอย่างดีสามารถมีรายละเอียดได้เหมือนภาพที่คุณเชื่อมโยงโดยไม่ต้องกังวลเรื่องประสิทธิภาพ แม้แต่การโต้ตอบเล็กน้อยโดยใช้การซ้อนทับแบบโปร่งใสที่วางเหนือ (หรือเพียงบางส่วน) ก็เป็นไปได้
หมายเหตุ: ขณะนี้มี.gifvรูปแบบที่สร้างโดย Imgurซึ่งแปลงไฟล์ GIF ได้ทันทีเป็นรูปแบบวิดีโอ WebM หรือ MP4 สิ่งนี้จะเพิ่มประสิทธิภาพโดยการลดขนาดไฟล์สุดท้ายอย่างมาก คุณอาจลองทำแบบเดียวกัน
อีกวิธีหนึ่งในการทำให้อนิเมชั่นราบรื่น แต่มีสไตล์อย่างมากคือการใช้สไปรต์ Google ใช้วิธีนี้สำหรับสิ่งที่ต้องการภาพเคลื่อนไหวโลโก้ อีกตัวอย่างที่ดีคือเว็บไซต์เก่าของ Alexander Engzellซึ่งมีอนิเมชั่นวิชาการพิมพ์ที่ไม่ดีโดยใช้วิธีการนี้ สิ่งนี้จะเหมาะสมที่สุดเมื่อ GIF มีขนาดใหญ่เกินไป แต่คุณไม่ต้องการการโต้ตอบมากนัก
ฉันยังได้เห็นภาพเคลื่อนไหว JavaScript ที่น่าสนใจซึ่งคล้ายกับสไปรต์หรือ GIF ที่ใช้โดย Google (เลื่อนภาพ Chrome ที่มุมบนซ้าย - ต้องอยู่ใน Chrome) แต่ใช้หน้ากากเคลื่อนไหวแทน ฉันเดาว่าพวกเขาใช้วิธีนี้เพื่อ จำกัด ขนาดไฟล์ทั้งหมด
เราได้รับความสามารถที่ยอดเยี่ยมเกี่ยวกับวิดีโอในช่วงไม่กี่ปีที่ผ่านมา <video>ปล่อยให้องค์ประกอบคือเรากำหนดวิธีการที่เราโต้ตอบและวิดีโอการใช้งานไม่เคยมาก่อน ตอนนี้เราสามารถใช้ประโยชน์จากวิดีโอพื้นหลังแบบเต็มหน้าจอได้อย่างง่ายดายและทำสิ่งต่างๆเช่นกรอบไปโดยกรอบในการเลื่อน ฉันยังสังเกตเห็นว่า FaceBook ใช้วิดีโอสำหรับภาพเคลื่อนไหวง่ายๆเมื่อต้อนรับผู้ใช้ในฟีดของพวกเขาในกิจกรรมพิเศษ ข้อดีคือสามารถบีบอัดไฟล์ให้มีขนาดเล็กและสามารถสร้างภาพเคลื่อนไหวได้หลากหลายมากขึ้น (ทุกสิ่งที่ซอฟต์แวร์แก้ไขวิดีโอสามารถทำได้) เช่นถ้าใครบางคนสามารถสร้างวิดีโอที่ไม่ดีได้มันก็จะกลายเป็นเรื่องง่ายที่จะเพิ่มเข้าไปในเว็บเพจ
เห็นได้ชัดว่าวิดีโอไม่ดีสำหรับภาพเคลื่อนไหวส่วนใหญ่บนเว็บ (เช่นการเปลี่ยนปุ่ม ฯลฯ ) ดังนั้นอย่าใช้มันทุกที่
เมื่อคุณต้องการสร้างภาพเคลื่อนไหวแบบไดนามิกเมื่อคุณต้องการการโต้ตอบขั้นพื้นฐานมากกว่าเมื่อคุณต้องการสร้างสภาพแวดล้อม 3 มิติและในกรณีอื่น ๆ GIF, ผีสางหรือวิดีโอ ตัดมัน. เมื่อตัดสินใจแล้วมีตัวเลือกอื่น ๆ อีกมากมายตัวเลือกที่ดีที่สุดนั้นขึ้นอยู่กับภาพเคลื่อนไหวและความต้องการของคุณ
ฉันไม่ได้มีสถิติ แต่ส่วนใหญ่ภาพเคลื่อนไหวเว็บที่ผมเคยเห็นการใช้ผ้าใบ Canvas นั้นยอดเยี่ยมในการใช้งานเนื่องจากประสิทธิภาพและความยืดหยุ่นในการสร้างสรรค์ มันใช้เพียงองค์ประกอบเดียวของเบราว์เซอร์ (DOM) เนื่องจากความจริงที่ว่ามันเป็นเพียงสี - เหมือนบนผืนผ้าใบจริง - สิ่งที่อยู่ด้านบนของกันและกัน ด้วยการติดตามสิ่งที่ถูกทาสีและตำแหน่งที่ใช้ JavaScript เราสามารถสร้างภาพเคลื่อนไหวที่น่าประทับใจและแม้แต่เกม
อย่างไรก็ตามข้อเสียเปรียบหลักในการใช้ Canvas คือความยากในการปรับขนาด บ่อยครั้งขึ้นอยู่กับอนิเมชั่นของหลักสูตรมันยากที่จะสร้างอนิเมชั่น Canvas ที่ตอบสนองได้ยากกว่าการใช้วิธีการอื่น ข้อเสียอีกอย่างหนึ่งคือการมีเนื้อหาจำนวนมากบน Canvas นั้นไม่เป็นมิตรกับ SEO มากนักเพราะองค์ประกอบของผ้าใบนั้นไม่สามารถรวบรวมข้อมูลได้ (คุณสามารถหลีกเลี่ยงปัญหานี้ได้ ในโน้ตเดียวกันสิ่งต่าง ๆ เช่นการเลือกข้อความสำหรับผู้ใช้นั้นทำได้ยากด้วย Canvas (โดยเฉพาะอย่างยิ่งโดยไม่ต้องใช้ไลบรารีเช่น CreateJS)
การใช้ Canvas อันดับต้นคือดูเดิลของ Google ซึ่งมักจะทำใน Canvas เมื่อพวกเขามีเกมหรือภาพเคลื่อนไหวเชิงโต้ตอบพวกเขาจะใช้ Canvas ทุกครั้งที่ฉันดู หากไม่มีการโต้ตอบพวกเขาจะใช้ GIF หรือสไปรต์
มีห้องสมุดที่ยอดเยี่ยมมากมายที่จะช่วยให้การทำงานกับ Canvas ง่ายขึ้นแม้ว่าจะไม่จำเป็นต้องใช้แน่นอนขึ้นอยู่กับสิ่งที่ต้องทำ หนึ่งในนั้นที่สร้างขึ้นสำหรับ Canvas คือCreateJS (ซึ่งคุณสามารถส่งออกไปจาก Animate CC), Pixi.js , PaperJS , KineticJSและFabricJS (วางเรียงตามความประทับใจของฉัน) ปลั๊กอิน After Effects ชื่อLottie (เดิมคือ BodyMovin)สามารถส่งออกไปยัง Canvas (หรือ SVG [1] ) และมีเครื่องมือสร้างภาพเคลื่อนไหว
แน่นอนคุณสามารถจับคู่ไลบรารีภาพเคลื่อนไหวขนาดใหญ่เช่น GSAP กับ Canvas ได้อย่างง่ายดาย สำหรับรายละเอียดตามภาพประกอบที่คุณเชื่อมโยงฉันขอแนะนำให้ใช้เฟรมเวิร์กบางประเภท แต่สำหรับหลาย ๆ สิ่งที่ไม่จำเป็นจริงๆมีประโยชน์โดยเฉพาะอย่างยิ่งถ้าคุณรู้วิธีใช้หนึ่งในนั้น
อีกวิธีที่มีประสิทธิภาพอย่างไม่น่าเชื่อในการสร้างภาพเคลื่อนไหวบนเว็บในแบบที่ตอบสนองได้ง่ายคือการใช้ SVG ( กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ ) พวกเขาเติมเต็มวัตถุประสงค์ของพวกเขา - เป็นเวกเตอร์ที่ปรับขนาดได้ - ดี หลายคนพบว่าการใช้ SVG ทำให้เกิดความสับสนในตอนแรก แต่สิ่งต่าง ๆ ส่วนใหญ่เช่นระบบพิกัดของ SVG และการแปลงร่างมีบทความที่ยอดเยี่ยมอธิบาย
หนึ่งในหลาย ๆ สิ่งที่น่ารักเกี่ยวกับ SVG คือมันสามารถเคลื่อนไหวได้ด้วย JavaScript, CSS บริสุทธิ์ (รวมถึง:hoverอเมริกา, transforms, transitions และanimations), หรือภาพเคลื่อนไหว SMIL (วิธีการ "ดั้งเดิม" เพื่อสร้างภาพเคลื่อนไหวด้วย SVG - แต่ IE ไม่ได้ ' ไม่สนับสนุนเลยและมันจะถูกคิดค่าเสื่อมราคาไปเรื่อย ๆ ) ฉันขอแนะนำให้พยายามใช้ CSS ก่อนแล้วจึง JavaScript ทุกครั้งที่มันไม่ได้ค่อนข้างง่ายใน CSS สำหรับ morphing องค์ประกอบ SVG จำเป็นที่จะต้องใช้เครื่องมือเช่นปลั๊กอิน MorphSVG ของ GSAPยกเว้นว่าคุณจะโอเคกับการสนับสนุนเพียงบางส่วนซึ่งในกรณีนี้ SMIL อาจเป็นที่ยอมรับ
เนื่องจากองค์ประกอบ SVG สามารถอยู่ในรูปร่างใดก็ได้จึงสามารถใช้เพื่อสร้างเอฟเฟกต์เจ๋ง ๆได้ Sarah Drasner สร้างมาตรฐานประสิทธิภาพการทำงานที่เป็นประโยชน์เกี่ยวกับภาพเคลื่อนไหว SVG ซึ่งแสดงให้เห็นว่าวิธีใดในการสร้างภาพเคลื่อนไหว SVG นั้นเป็นประสิทธิภาพที่ดีที่สุด
ขึ้นอยู่กับภาพเคลื่อนไหว (และต้องการการสนับสนุนเบราว์เซอร์) ไลบรารีอย่างSnap.svgหรือ GSAP อาจมีประโยชน์ แต่บ่อยครั้งที่ CSS และหากจำเป็นต้องใช้ JS แบบกำหนดเองเพียงเล็กน้อยเท่านั้นที่จำเป็น เมื่อกล่าวถึงปลั๊กอิน After Effects ที่เรียกว่าLottie (ชื่อเดิมว่า BodyMovin)และส่วนขยายFlashชื่อFlash 2 SVGจะมีประโยชน์มากสำหรับการสร้างภาพเคลื่อนไหว SVG
สำหรับรายละเอียดเพิ่มเติมให้ดูที่โพสต์ที่เกี่ยวข้องนี้โดยเฉพาะเกี่ยวกับองค์ประกอบภาพเคลื่อนไหว SVG
PS วิธีที่ดีที่สุดคือใช้ SVG ใน<object>แท็กหรือฝังลงใน<svg>องค์ประกอบ XML โดยตรงหากเป็นการโต้ตอบและเป็นภาพพื้นหลังหากไม่ใช่แบบโต้ตอบ แต่ก็มีวิธีอื่นที่จะทำได้เช่นกัน
จากประสบการณ์ของฉันภาพเคลื่อนไหวและการเปลี่ยน CSS ควรใช้เป็นหลักสำหรับองค์ประกอบ UI และการเปลี่ยนภาพและภาพเคลื่อนไหวพื้นฐานอื่น ๆ แม้กระนั้นบางครั้งการใช้ไลบรารีภาพเคลื่อนไหว JS เช่นGSAPหรือVelocity.jsสำหรับการเคลื่อนไหว / การเปลี่ยน UI มีความเหมาะสม มันขึ้นอยู่กับประเภทของพฤติกรรมที่คุณต้องการและสะดวกใน CSS หรือไม่
ในขณะที่เราสามารถสร้างสิ่งที่บ้า ด้วย CSS บริสุทธิ์โดยทั่วไปมันยากที่จะสร้างภาพประกอบที่ซับซ้อนอย่างที่คุณให้เป็นตัวอย่างโดยใช้ CSS แม้ในขณะที่จัดการกับภาพเพิ่มเติม ภาพเคลื่อนไหว CSS ที่ซับซ้อนมักจะรักษาได้ยากกว่าจาวาสคริปต์ด้วยเช่นกัน ข้อเสียอีกอย่างคือภาพเคลื่อนไหว CSS นั้นยากที่จะเปลี่ยนแปลงด้วย JavaScriptและมันจะเล่นได้ไม่ดีเมื่อผสมกับ JavaScript
เมื่อพูดถึงเรื่องนี้การโต้ตอบอย่างง่าย ๆ โดยใช้การเปลี่ยนภาพและภาพเคลื่อนไหวมักจะใช้ CSS คุณควรเริ่มต้นมัน ในการเริ่มต้นเรียนรู้วิธีการใช้ CSS เคลื่อนไหวตรวจสอบของฉันแนะนำให้รู้จักกับนิเมชั่นเว็บ
นอกจากนี้คุณยังสามารถค้นหาภาพเคลื่อนไหวที่เป็นประโยชน์และฟังก์ชั่นผ่อนคลายในไลบรารีเช่นAnimate.cssที่คุณสามารถดึงและเพิ่มไปยังโครงการของคุณเอง คุณแทบจะไม่ต้องการห้องสมุดทั้งหมดเลยใช้เฉพาะส่วนที่คุณต้องการ
ภาพเคลื่อนไหว JavaScript ที่ใช้ DOM นั้นค่อนข้างตรงไปตรงมา พวกเขามีตัวแทนที่ไม่ดีเพราะanimate()มีไลบรารี่แอนิเมชั่นที่น่ากลัวอย่าง jQuery แต่สามารถมีประสิทธิภาพสูงโดยเฉพาะเมื่อใช้ API ภาพเคลื่อนไหวบนเว็บ (ที่อธิบายด้านล่าง) หรือไลบรารีแอนิเมชั่นพิเศษเช่นGSAP , Velocity.jsหรือmo.js ( GSAP ยังมีปลั๊กอินพิเศษเพื่อแทนที่ jQuery .animateโดยเฉพาะ) เมื่อใช้ไลบรารีดังกล่าวพวกเขามักจะมีประสิทธิภาพเหนือกว่าภาพเคลื่อนไหวประเภทอื่นสำหรับภาพเคลื่อนไหวที่เข้มข้นมากขึ้นเช่นการสร้างภาพเคลื่อนไหวองค์ประกอบจำนวนมาก
สาเหตุหลักที่คุณต้องใช้ภาพเคลื่อนไหวที่ใช้ DOM คือถ้าคุณมีภาพเคลื่อนไหวของผู้ใช้จำนวนมากหรือกำหนดเวลาที่ซับซ้อนซึ่งเกี่ยวข้องกับองค์ประกอบ DOM ที่ทำไปแล้ว บ่อยครั้งที่เป็นการดีที่สุดที่จะลองใช้สิ่งต่างๆเช่น Canvas บน DOM ด้วยเหตุผลที่ระบุไว้แล้ว
ไลบรารี่อย่าง GSAP ให้เราทำสิ่งที่คลั่งไคล้เช่นชะลอแอนิเมชั่นในการโฮเวอร์โดยการติดตามเมทริกซ์แอนิเมชั่น ด้วยวิธีนี้แอนิเมชันที่ใช้ DOM สามารถปรับแต่งและโต้ตอบได้มากกว่าแอนิเมชั่นรูปแบบอื่น ๆ เมื่อทำได้ดี ข้อเสียเพียงอย่างเดียวคือบางครั้งขึ้นอยู่กับวิธีการสร้างและสิ่งที่ต้องทำมันจะทำงานได้ไม่ดี
WebGLเป็นวิธีสร้างผลงาน 3D เป็นหลัก มีโปรเจคที่ยอดเยี่ยมที่คุณควรลอง ไม่ควรใช้กับทุกหน้าเว็บ แต่เป็นสิ่งสำคัญที่ต้องกล่าวถึง
จริง ๆ แล้วมันสร้างภาพเคลื่อนไหวองค์ประกอบ DOM เพื่อสร้างสภาพแวดล้อม 3D (และ 2D) ซึ่งยอดเยี่ยมเนื่องจากศักยภาพที่มีอยู่ เมื่อใช้ห้องสมุด WebGL จะกลับไปใช้ Canvas แต่ก็ยังไม่มีการสนับสนุนที่ดีบนมือถือและสามารถใช้งานได้อย่างหนัก โดยทั่วไปจะค่อนข้างชัดเจนเมื่อคุณต้องการใช้ WebGL หรือไม่
จากประสบการณ์ของฉันการใช้ห้องสมุด WebGL เป็นสิ่งจำเป็นจริง ๆ โชคดีที่มีบางคนที่ดี ThreeJSคือไกลโดยที่พบมากที่สุดที่ผมเคยเห็นตามด้วยPixiJS กรอบ WebGL เช่นA-Frameยังสามารถหยิบขึ้นมาและสร้างสิ่งพื้นฐานได้ง่าย ๆ
ภาพเคลื่อนไหวเว็บ APIเป็นความพยายามที่จะสร้างมาตรฐานวิธีการที่ภาพเคลื่อนไหวที่มีการใช้งานและการบำรุงรักษาเบราว์เซอร์ที่จับคู่กับการปรับปรุงประสิทธิภาพการทำงาน มันมีไว้เพื่อใช้กับองค์ประกอบ DOM รวมถึง SVG มันคล้ายกับโครงสร้างของภาพเคลื่อนไหว CSS (ในรูปลักษณ์ JS) แต่เพิ่มความสามารถเช่นไทม์ไลน์และประสิทธิภาพที่เพิ่มขึ้น
จะช่วยเพิ่มประสิทธิภาพการทำงานโดยการใส่ภาพเคลื่อนไหวบนด้ายเรียงพิมพ์นี้ (สำหรับรายละเอียดเพิ่มเติมตรวจสอบการโพสต์ที่ยิ่งใหญ่นี้ในเรื่อง) สำหรับคำแนะนำเกี่ยวกับวิธีการใช้งานให้ตรวจสอบMozilla docsหรือโพสต์เกริ่นนำนี้
คุณอาจถามว่า " สิ่งนี้จะแทนที่ไลบรารีภาพเคลื่อนไหว JavaScript หรือไม่ " คำตอบคือ " หวังว่าจะมีบ้าง " มันมีประโยชน์สำหรับทุกคนสำหรับเอ็นจิ้นแอนิเมชันเบราว์เซอร์ดั้งเดิมเพื่อปรับปรุงและเช่นเดียวกับบางไลบรารีแอนิเมชั่นที่มีประสิทธิภาพน้อยกว่าจะไร้ประโยชน์ กับที่ถูกกล่าวว่าห้องสมุดภาพเคลื่อนไหวที่มีประสิทธิภาพมากขึ้นจะยังคงมีผลประโยชน์เพิ่มเติมเช่นคน GSAP ตั้งข้อสังเกต ไม่ว่าคุณจะต้องการห้องสมุดหรือไม่เมื่อ WAAPI ได้รับการสนับสนุนอย่างกว้างขวางก็ยังถูกกำหนดโดยความต้องการของคุณ
ปัจจุบัน WAAPI ไม่ได้รับการสนับสนุนที่ดีแต่สามารถใช้ได้กับpolyfillในการผลิตในวันนี้ ดูเหมือนว่าจะยังคงดีขึ้นและได้รับการสนับสนุนเพิ่มเติม
หลีกเลี่ยงการใช้คุณสมบัติที่ไม่ performantหรือก่อให้เกิดการจัดเรียงใหม่ / การวาดใหม่
หลีกเลี่ยงการสร้างองค์ประกอบจำนวนมากในหน้าเว็บเนื่องจากมีความเข้มข้นมากขึ้นและอาจเป็นความเจ็บปวดที่จะเปลี่ยนแปลงในภายหลัง
เมื่อใช้ CSS ให้ใช้transitionภาพเคลื่อนไหวทับทุกครั้งที่ทำได้ (ด้วยเหตุผล) พวกเขาทำงานได้ดีขึ้นและมักจะทำงานได้ง่ายขึ้น
ใช้will-changeทรัพย์สินอย่างชาญฉลาดในองค์ประกอบขนาดใหญ่ที่คุณจะเคลื่อนไหวเพื่อให้เบราว์เซอร์รู้ล่วงหน้า สำหรับรายละเอียดเพิ่มเติมและคำแนะนำเกี่ยวกับการอ่านบางอย่างเช่นบทความ SitePoint นี้ในเรื่อง
หลีกเลี่ยงsetIntervalและเลือกใช้requestAnimationFrameเมื่อทำการกำหนดเวลาใน JavaScript (ไลบรารีภาพเคลื่อนไหวที่ดีเช่น GSAP จะทำสิ่งนี้ให้คุณหากคุณใช้กำหนดเวลา)
เมื่อคุณทำได้ให้ใช้ API แอนิเมชั่นเว็บเพราะมันมีความสามารถในการแอนิเมชั่นด้วยวิธีการอื่น ๆ ใน JavaScript ที่ไม่มี
คุณไม่ควรใช้แฟลชในผลิตภัณฑ์สุดท้าย ภาพเคลื่อนไหว JavaScript ทำงานได้ดีขึ้นมีความไดนามิกมากขึ้นแก้ไขได้ง่ายขึ้นไม่ต้องดาวน์โหลดใด ๆ ทำงานข้ามแพลตฟอร์มได้มากขึ้น (Flash ไม่ทำงานบนแท็บเล็ต / โทรศัพท์ส่วนใหญ่) และตอบสนองได้ดีกว่า Flash ตัวใหญ่ ๆ พวกเขายังไม่สามารถเข้าถึงได้มากและไม่เป็นมิตรกับ SEO
กับที่ถูกกล่าวว่า Animate CC (ก rebranding ของ Flash) เป็นวิธีที่มีประโยชน์ในการสร้างภาพเคลื่อนไหวและสามารถส่งออกไปโดยใช้ผ้าใบCreate.js
โดยปกติจะมีหลายวิธีที่คุณสามารถใช้เพื่อสร้างภาพเคลื่อนไหว วิธีที่ดีที่สุดขึ้นอยู่กับสิ่งที่คุณต้องการให้ทำและบางครั้งก็ไม่มีวิธีที่ดีกว่าอย่างชัดเจน บ่อยครั้งที่ฉันพบว่าตัวเองใช้หลายอย่างในโครงการเดียวกัน สิ่งสำคัญคือการคิดวิเคราะห์เพื่อให้เข้าใจอย่างถ่องแท้ว่าคุณต้องการให้อนิเมชั่นมีพฤติกรรมอย่างไรและตัดสินใจเลือกวิธีการตามนั้น นอกจากนี้ยังช่วยถ้าคุณทำงานในแต่ละบิต
[1] - Lottie ยังสามารถส่งออกไปยัง Android, iOS และ React Nativeได้อีกด้วย
จากประสบการณ์ของฉันเมื่อทำการเคลื่อนไหวแบบเคลื่อนไหว (ภาพเคลื่อนไหวที่ไม่ได้มีไว้สำหรับการโต้ตอบกับผู้ใช้) ฉันพบว่าสิ่งที่ดีที่สุดสำหรับฉันคือการเคลื่อนไหวภาพประกอบใน After Effects และหลังจากนั้นส่งออกผลลัพธ์สุดท้ายไปยังไฟล์. GIF สิ่งนี้ทำให้แอนิเมชั่นเป็นมิตรกับเบราว์เซอร์อย่างแน่นอนและรับประกันการสร้างภาพข้อมูลที่เหมือนกันในทุกอุปกรณ์
อย่างไรก็ตามหากคุณกำลังมองหาบางสิ่งที่ผู้ใช้อาจโต้ตอบฉันเชื่อว่า Canvas เป็นวิธีที่จะไปและ CreateJS นั้นดูเหมือนจะเหมาะกับงานที่มีไลบรารี EaseJS
อย่างไรก็ตามตามตัวอย่างของคุณคุณสามารถทำได้ด้วยไฟล์ภาพเคลื่อนไหว GIF และรับผลลัพธ์เดียวกัน
หากคุณทำงานกับ After Effects คุณสามารถใช้ปลั๊กอินBodymovin มันแสดงผลงานของคุณสำหรับมือถือและการใช้งานเว็บ คุณจะมีไฟล์. json และ lottie.js ซึ่งคุณสามารถใช้ใน HTML ของคุณ แต่ก่อนอื่นคุณต้องปิดการอนุญาตให้สคริปต์เขียนไฟล์และเข้าถึงเครือข่ายในการตั้งค่าทั่วไป เมื่อคุณมีที่ไปทำเพื่อหน้าต่าง , ส่วนขยายและหาBodymovin เลือกองค์ประกอบของคุณตั้งค่าตำแหน่งสำหรับการบันทึกและคลิกแสดงผล ใส่ไฟล์. json และ lottie.js ลงใน HTML และงานของคุณก็เสร็จสิ้น ฉันคิดว่า GIF ไม่ใช่ทางออกที่ดีที่สุดเพราะต้องใช้เวลาในการโหลดมากขึ้น
คุณสามารถดาวน์โหลดได้ที่นี่: http://aescripts.com/bodymovinเพียงเพิ่มราคาของคุณหรือถ้าคุณต้องการมันฟรีคุณสามารถใส่ $ 0.00 ...
นี่คือบทแนะนำสำหรับการใช้ Bodymovin และตั้งค่าภาพเคลื่อนไหวของคุณในเว็บไซต์ของคุณด้วย Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
ถ้าคุณรู้พื้นฐาน HTML และ CSS มันควรจะง่ายสำหรับคุณ การสอนนั้นช่วยฉันฉันหวังว่านี่จะช่วยคุณได้