แอนิเมชั่น Lottie คืออะไร? ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับล็อตตี้

แน่นอนว่าการสร้างแอนิเมชั่นที่ซับซ้อนสำหรับ Android, iOS ฯลฯ นั้นเป็นกระบวนการที่ใช้เวลานาน แม้กระทั่งในฐานะนักออกแบบหรือแอนิเมเตอร์ บางครั้งเป็นกระบวนการพัฒนาสมอง

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

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

ในบล็อกนี้ ฉันจะบอกคุณเกี่ยวกับรูปแบบที่น่าสนใจและสะดวกนี้

ล็อตตี้คืออะไร?

ในช่วงหลายปีก่อน Lottie นักออกแบบการเคลื่อนไหวจะสร้างแอนิเมชั่นและส่งไปยังนักพัฒนาซอฟต์แวร์เพื่อนำไปปฏิบัติ ตัวเลือกการใช้งานไม่เพียงพอและอยู่ในขอบเขตจำกัด

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

Hernan Torrisi เกิดแนวคิดในการส่งออกการแสดงภาพเคลื่อนไหวที่สร้างใน Adobe After Effects และสร้างภาพเคลื่อนไหวขณะใช้งานจริงในปี 2015 ความสามารถในการเขียนสคริปต์ของ After Effects ถูกใช้เพื่อทำซ้ำโครงการแอนิเมชั่น และปลั๊กอินสำหรับ Adobe After Effects ที่เรียกว่า Bodymovin ได้รับการพัฒนาที่สร้างคำอธิบายของแอนิเมชั่นในรูปแบบ JSON

นอกเหนือจากโปรแกรมเล่นสำหรับเบราว์เซอร์แล้ว เขาได้จัดเตรียมตัวแสดงรูปแบบแรกสำหรับรูปแบบ ซึ่งสร้างโดยใช้จาวาสคริปต์

นับตั้งแต่เปิดตัวในปี 2560 LottieFiles ได้ให้แพลตฟอร์มสำหรับแอนิเมชั่นและนักพัฒนาสำหรับการทดสอบ แชร์ และแสดงแอนิเมชั่นของพวกเขาบนเว็บอย่างรวดเร็ว Lottie Animation-based File Format (JSON) ช่วยให้นักออกแบบสามารถถ่ายโอนแอนิเมชั่นข้ามแพลตฟอร์มได้อย่างง่ายดาย

Lottie ได้รับการตั้งชื่อตาม Charlotte 'Lotte' Reiniger ผู้กำกับภาพยนตร์ชาวเยอรมันที่ได้รับการยกย่องอย่างกว้างขวางว่าเป็นผู้บุกเบิกแอนิเมชั่นภาพเงาดำชั้นนำของโลก ไม่มีข้อจำกัดบนแพลตฟอร์มที่รองรับ สามารถเข้าถึงได้ผ่าน iOS, Android และเว็บ

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

ไฟล์เหล่านี้เป็นไฟล์ขนาดเล็กที่อาจใช้กับอุปกรณ์ใดๆ และสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ นักพัฒนาสามารถใช้ไฟล์ Lottie ซ้ำในการเขียนโปรแกรมได้

ล็อตตี้ทำอะไรได้บ้าง?

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

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

มีการเพิ่มโค้ดพิเศษในขณะที่ทำสำเนาคีย์เฟรมเดียวกันบนเลเยอร์ที่คล้ายคลึงกัน คุณควรใช้ภาพเคลื่อนไหวคีย์เฟรมของเส้นทางทุกครั้งที่ทำได้

พื้นที่ส่วนใหญ่ถูกใช้จนหมดโดยการเพิ่มข้อมูลสำหรับจุดยอดแต่ละจุดในแต่ละคีย์เฟรม

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

คุณสามารถใช้ล็อตตี้ได้ที่ไหน

นักพัฒนากล่าวว่า Lottie's สามารถเข้าถึงได้จากแทบทุกแพลตฟอร์ม รวมถึงเว็บและอุปกรณ์มือถือ กล่าวอีกนัยหนึ่งอาจรวมเข้ากับทั้งแอปพลิเคชันมือถือและแอปพลิเคชันบนเว็บได้อย่างง่ายดาย

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

ปลั๊กอินและไลบรารีข้ามแพลตฟอร์มต่างๆ พร้อมใช้งานสำหรับเว็บ, iOS, Android, Flutter, React, Vue, Angular และ Sketch รองรับ Figma, After Effects และอื่นๆ ในไฟล์แอนิเมชั่น Lottie

ทำไมต้องใช้แอนิเมชั่น Lottie

เป็นเรื่องธรรมดาที่จะคิดว่าเหตุใดคุณจึงควรใช้แอนิเมชั่น Lottie เมื่อมีตัวเลือกอื่นๆ มากมาย

นี่คือเหตุผล:

เล่นได้ทุกที่

เว็บเพลเยอร์ Lottie เข้ากันได้กับเบราว์เซอร์ใดๆ ที่รองรับ Javascript ร่วมสมัย ซึ่งหมายความว่า Lottie สามารถเล่นได้บนเบราว์เซอร์รุ่นใหม่ที่รองรับ Javascript นอกจากนี้ เนื่องจากชุดพัฒนาซอฟต์แวร์ล่าสุดนำเสนอเนื้อหาเว็บแบบไดนามิก การผสานรวม Lottie เข้ากับโปรแกรมเดสก์ท็อปหรือแล็ปท็อปจึงง่ายขึ้น

นอกจากนี้ยังมีไลบรารี่สำหรับใช้เล่น Lottie ในแพลตฟอร์ม IOS, Android และ Tizen ทำให้สามารถใช้ Lottie ในแอปพลิเคชันมือถือบนสมาร์ทโฟนและแท็บเล็ตส่วนใหญ่ได้ บริษัทใหญ่ๆ นำแอนิเมชั่น Lottie ไปใช้อย่างรวดเร็วเพื่อปรับปรุงส่วนหน้าของอุปกรณ์พกพา ในขณะที่สตาร์ทอัพใช้ Lottie ในการออกแบบผลิตภัณฑ์เพื่อแยกตัวออกจากการแข่งขัน

ดูแลรักษาง่าย

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

ข้อมูลข้อความในแอนิเมชั่น Lottie มีโครงสร้างเป็น JSON ซึ่งหมายความว่าพร้อมสำหรับการหลอมรวมเข้ากับ Javascript หรือสภาพแวดล้อมการพัฒนาแอปพลิเคชันอื่นๆ ที่ยอมรับ JSON โดยไม่ต้องมีการแยกวิเคราะห์หรือประมวลผลเพิ่มเติม เป็นผลให้ Lottie กลายเป็นรูปแบบกราฟิกแอนิเมชั่นที่ใช้กันอย่างแพร่หลายและพกพามากที่สุดในโลก

มันเป็นไดนามิก

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

ความสามารถในการปรับขนาด

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

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

คุณภาพดีที่สุด

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

ผู้ใช้ซูมเข้าไปในแอนิเมชั่น Lottie และผู้เล่นวาดใหม่ด้วยความละเอียดปกติ ซึ่งหมายความว่าแอนิเมชั่นของ Lottie จะไม่มีวันแตกเป็นพิกเซล ไม่ว่าจะขยายขนาดแค่ไหนก็ตาม

ใน Crux

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

หากคุณกำลังรอคอยที่จะทำวิดีโอแอนิเมชั่น Lottie ที่ที่ดีที่สุดที่คุณอยากเป็นคือ webdew

ที่ webdew วิดีโออธิบาย แอนิเมชั่นตัวละคร แอนิเมชั่น 2 มิติ และแอนิเมชั่นไวท์บอร์ดถูกสร้างขึ้นโดยนักแอนิเมชั่นและนักออกแบบกราฟิกที่มีทักษะ ติดต่อเราเพื่อทราบข้อมูลเพิ่มเติม

บรรณาธิการ: อมฤตา