วันหนึ่งนักออกแบบ UI ของเรามาหาฉันและบอกว่าฉันควรแทนที่แอนิเมชั่นที่ฉันเขียนในโปรแกรมด้วยแอนิเมชั่น json ที่พวกเขาให้ฉัน เหตุผลก็คือแอนิเมชั่นบางตัวมีความซับซ้อนมากและไม่สามารถบรรลุผลตามที่คาดหวังได้หากฉันเขียนมันเอง ( ตอนที่ฉันเขียนเรื่องนี้ จู่ๆ ฉันก็เกิดคำถามขึ้นมาว่าทำไมไม่ใช้ gif สำหรับแอนิเมชั่นที่ซับซ้อนขนาดนี้ นักพัฒนา Android ที่อยู่ตรงข้ามฉันตอบว่าคุณภาพของ gif อาจไม่สูงเมื่อเล่น โอเค ฉันเชื่ออย่างนั้น)
ฉัน:? - - - ลูกค้าสามารถเพิ่มภาพเคลื่อนไหว json ได้ ฉันไม่เคยได้ยินมาก่อนว่าหน้า H5 สามารถอ่านภาพเคลื่อนไหว json ได้
นักออกแบบดูมั่นใจแล้วบอกว่าใช่ มีเวอร์ชันเว็บด้วย
ขณะที่ฉันเขียนสิ่งนี้ ฉันอยากจะยกย่องนักออกแบบของเราจริงๆ เกือบหลายวิธีที่พบวิธีแก้ปัญหาที่ดีภายใต้แรงกดดันของพวกเขา (โอ้ พวกเขาสามารถเขียนหน้า H5 ได้ด้วย... พวกเขาต้องการให้ฉันใช้ซีรีส์อะไร
มาถึงคำถามนี้ จะใช้แอนิเมชัน json ในหน้า H5 ได้อย่างไร
วิธีใช้ภาพเคลื่อนไหว json ภายในหน้า H5ในเวลานี้ นักออกแบบส่งลิงก์มาให้ฉัน ดูที่นี่ lottie-web ฉันคลิกลิงก์นั้นเพื่อเรียนรู้เพิ่มเติม มันเป็นไลบรารีแอนิเมชันที่เปิดโดย Airbnb ผู้ออกแบบต้องการเพียงต้องส่งออกไฟล์ JSON ผ่านแอนิเมชั่นที่สร้างโดย AE จากนั้นส่วนหน้าใช้ Lottie เพื่อโหลดไฟล์ JSON โดยตรงเพื่อสร้างภาพเคลื่อนไหว โดยไม่จำเป็นต้องให้ผู้ออกแบบตัด GIF จำนวนมาก และส่วนหน้าไม่จำเป็นต้องทำการวาดภาพที่ซับซ้อน มันสามารถฆ่านกสองตัวด้วยหินก้อนเดียว และ Lottie พร้อมใช้งานบนทุกแพลตฟอร์ม รวมถึง iOS, Android, เว็บและ React สามารถใช้ Native ได้และใช้หน่วยความจำน้อยลงและโหลดได้อย่างราบรื่น (ทำไมฉันถึงเพิ่งค้นพบสิ่งมหัศจรรย์เช่นนี้?
พูดมาเยอะแล้วจะใช้ในหน้า H5 ได้อย่างไร?
ง่ายมาก โฟลเดอร์ที่สร้างโดยผู้ออกแบบจะถูกส่งถึงคุณ (ผู้ออกแบบเพียงต้องเพิ่มปลั๊กอิน lottie ใน AE และส่งออก) หลังจากเปิดแล้ว ควรมีลักษณะดังนี้ รู้ว่ามันทำงานอย่างไร ใช้แล้ว (ฉันยังคงเขียนบทความด้านเทคนิคที่นี่)
นอกเหนือจากเรื่องตลกแล้ว ฉันพบข้อผิดพลาดมากมายระหว่างการใช้งาน ต่อไปนี้คือสิ่งที่ควรคำนึงถึงเมื่อใช้งาน
1. มีหลายสิ่งที่อยู่ในบรรทัด demo.html ซึ่งไม่น่าดูเมื่อใช้ลองดูให้ละเอียดยิ่งขึ้น ที่จริงแล้ว demo.html ใส่ทั้ง js และ json ไว้ข้างใน ในเวลานี้ เราสามารถแยก js และ json ออกจากกันได้
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
ข้อมูล json ที่จำเป็นสำหรับภาพเคลื่อนไหวจะอยู่ในไฟล์ data.json แต่รูปแบบข้อมูลในไฟล์ json ที่กำหนดจะเป็นดังนี้ (ยาวเกินไปและไม่สามารถตัดออกได้)
หากคุณต้องการใช้สคริปต์เพื่อแนะนำไฟล์ json ใน HTML แยกต่างหาก จะมีการรายงานข้อผิดพลาด ดังนั้นคุณจึงต้องแก้ไขไฟล์ json เพิ่มตัวแปรข้างหน้า และกำหนดค่า ดังที่แสดงด้านล่าง:
ด้วยวิธีนี้ คุณสามารถนำเข้า json ได้ในลักษณะเดียวกับไฟล์ js
<script type=text/javascript src=./data.json></script>
ด้วยวิธีนี้ demo.html ที่มีอยู่จะลดลงเหลือดังต่อไปนี้
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margin: 0px; ความสูง: 100%; : ซ่อนอยู่; } #lottie{ พื้นหลังสี:#fff; ความสูง: 100%; แปล3d (0,0,0); การจัดตำแหน่งข้อความ: กึ่งกลาง; ความทึบ: 1; } </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { คอนเทนเนอร์: document.getElementById('lottie'), renderer: 'svg', วนซ้ำ: จริง, เล่นอัตโนมัติ: จริง, AnimationData: AnimationData }; ภาพเคลื่อนไหว; anim = lottie.loadAnimation(params);</script></body></html>แน่นอน หากคุณใช้การเขียนโปรแกรมโมดูลาร์ js คุณสามารถนำเข้าได้โดยตรงโดยไม่ต้องเปลี่ยน data.json ดังนี้:
นำเข้าข้อมูลภาพเคลื่อนไหวจาก './data.json'2. ปรับภาพเคลื่อนไหวให้เข้ากับอุปกรณ์มือถือ
เหตุผลที่ฉันคิดว่านี่เป็นข้อผิดพลาดก็เพราะว่าแอนิเมชันที่นักออกแบบให้มานั้นเป็นแบบเต็มหน้าจอและไม่โปร่งใส จากนั้นเธอก็ขอให้ฉันวางตำแหน่งแอนิเมชั่นที่มีความกว้าง 100% และฉันได้ลองใช้การสกัดกั้นตรงกลางแนวตั้ง เบราว์เซอร์ ภายใต้หน้าจอ 360*640 ความกว้างคือ 100% นิพจน์จะเป็นดังนี้ (ดูเหมือนว่าความสูงจะเป็น 100% ความกว้างจะถูกปรับให้อยู่ตรงกลาง และสีพื้นหลังสีดำจะรั่วไหลออกมาทั้งสองด้าน โปรดดูส่วนกรอบสีน้ำเงินในภาพด้านล่าง)
การสลับไปที่หน้าจอของ iPhone
เลย์เอาต์นี้คุ้นเคยมาก มันทำงานเหมือนกับเมื่อตั้งค่าแอตทริบิวต์ object-fit ของ img (การปรับให้พอดีวัตถุก็เป็นสมบัติเช่นกัน นักเรียนที่สนใจสามารถศึกษาได้ มันใช้งานง่ายมาก)
เพื่อแก้ปัญหาความต้องการของนักออกแบบ ฉันจึงเพิ่มโค้ดต่อไปนี้เป็นหลัก:
ส่วน js: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); ส่วน css: (เพิ่มเค้าโครงแบบยืดหยุ่นให้กับ lottie) #lottie { width:100 %; ความสูง: 100%; แปลงร่าง: แปล 3d (0,0,0); ซ้าย: 0; z-index: 3; display: flex; flex-direction: row; justify-content: center;ผลสุดท้าย:
สรุปภาพหน้าจอด้านบนเป็นแบบคงที่ แต่จริงๆ แล้วมีเอฟเฟกต์แบบไดนามิก ฉันไม่รู้วิธีเพิ่มภาพเคลื่อนไหว ดังนั้นฉันจึงไม่ได้ทำ หากคุณสนใจ คุณสามารถลองดูได้
ขอบเขตการใช้งาน: ฉันรู้สึกว่าโดยทั่วไปแล้วภาพเคลื่อนไหวแบบเต็มหน้าจอหรือบางส่วนที่ซับซ้อนสามารถใช้วิธีนี้ได้ มันราบรื่นกว่า GIF และมีความเข้ากันได้ดี ผลิตภัณฑ์ Android บางตัวใช้วิธีนี้เพื่อเปิดหน้าจอด้วยวิธีที่ยอดเยี่ยม เช่น หน้า H5 หากเป็นเช่นนั้น โปรแกรมของคุณเองก็สามารถใช้แอนิเมชั่นธรรมดาๆ ได้ และคุณสามารถหลีกเลี่ยงข้อผิดพลาดได้
ลิงค์อ้างอิง:
เว็บไซต์อย่างเป็นทางการของลอตตี้
ที่อยู่ github ของ lottie-web
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network