จาก Flash ถึง Lottie ไปจนถึง State Machines: วิวัฒนาการของ Web Vector Animation
วิธีที่เว็บแอนิเมชั่นเวกเตอร์ย้ายจาก Flash และ ActionScript ไปยังการส่งออก After Effects ของ Lottie จากนั้นไปยังรันไทม์ของเครื่องสถานะ และสิ่งที่แต่ละขั้นตอนเปลี่ยนแปลงไป
หลัก Takeaway
Flash รวมแอนิเมชั่นเวกเตอร์และการโต้ตอบไว้ในเครื่องมือเดียว แต่ทำงานในปลั๊กอินที่ Adobe หยุดรองรับหลังวันที่ 31 ธันวาคม 2020 Lottie นำแอนิเมชั่นแบบเวกเตอร์กลับมาด้วยการเล่นแอนิเมชั่น After Effects ซึ่งส่งออกเป็น JSON พร้อมด้วย Bodymovin โดยกำเนิดบนเว็บและมือถือ แต่แอนิเมชั่นเหล่านั้นเล่นเท่านั้น รันไทม์ของเครื่องสถานะ เช่น Rive และ ExodeUI จะเพิ่มการโต้ตอบกลับเข้าไปในไฟล์การออกแบบ
Flash: แอนิเมชันและตรรกะในที่เดียว
Flash ให้นักออกแบบวาดเวกเตอร์ สร้างภาพเคลื่อนไหวบนไทม์ไลน์ และเพิ่มลักษณะการทำงานด้วย ActionScript ทั้งหมดในไฟล์เดียว มันขับเคลื่อนเกม โฆษณา และเว็บไซต์ทั้งหมด จุดอ่อนของมันคือปลั๊กอิน: มันทำงานนอกเทคโนโลยีของเบราว์เซอร์เอง โดยมีปัญหาด้านความปลอดภัยและประสิทธิภาพอย่างต่อเนื่อง Adobe สิ้นสุดการสนับสนุน Flash Player หลังจากวันที่ 31 ธันวาคม 2020 และบล็อกเนื้อหา Flash ไม่ให้ทำงานตั้งแต่วันที่ 12 มกราคม 2021
Lottie: เวกเตอร์ที่ไม่มีปลั๊กอิน
Lottie จาก Airbnb แยกวิเคราะห์ภาพเคลื่อนไหว Adobe After Effects ที่ส่งออกเป็น JSON ด้วยปลั๊กอิน Bodymovin และเรนเดอร์บนเว็บ iOS, Android และ React Native มันทำให้การเคลื่อนไหวเวกเตอร์ที่สมบูรณ์ใช้งานได้จริงในแอพอีกครั้ง และยังคงเป็นรูปแบบที่รองรับอย่างกว้างขวางที่สุดสำหรับแอนิเมชั่นที่เล่นง่ายๆ
ส่วนที่ขาดหายไป: การโต้ตอบ
ไฟล์ Lottie อธิบายไทม์ไลน์ ไม่ใช่พฤติกรรม การสร้างภาพเคลื่อนไหว Lottie ตอบสนองต่อการโฮเวอร์ การโหลด หรือความสำเร็จหมายถึงการเขียนโค้ดรอบๆ โปรแกรมเล่น Flash มีพฤติกรรมนั้นอยู่ในตัว โลกที่ปราศจากปลั๊กอินก็สูญเสียมันไป
เครื่องสถานะ: ลักษณะการทำงานในไฟล์อีกครั้ง
รันไทม์ของเครื่องจักรของรัฐนำแนวคิด Flash กลับมาโดยไม่ต้องใช้ปลั๊กอิน Rive ช่วยให้คุณสามารถออกแบบภาพเคลื่อนไหวแบบเวกเตอร์และโยงไปยังเครื่องสถานะที่อินพุตตัวควบคุมโค้ดของคุณ ExodeUI ซึ่งเราสร้างขึ้นนั้นใช้แนวคิดเดียวกันนี้กับ UI ของผลิตภัณฑ์ โดยเพิ่มเลย์เอาต์ ฟิสิกส์ของสปริง และตรรกะในไฟล์ JSON แบบเปิดไฟล์เดียวที่เล่นโดยรันไทม์สำหรับ React, SwiftUI, Flutter และอื่นๆ
คีย์ Principles ที่ต้องจำ
- Flash รวมภาพเคลื่อนไหวแบบเวกเตอร์และการโต้ตอบในปลั๊กอิน
- Adobe สิ้นสุดการสนับสนุน Flash Player หลังจากวันที่ 31 ธันวาคม 2020
- Lottie เล่นภาพเคลื่อนไหว After Effects ที่ส่งออกด้วย Bodymovin โดยกำเนิด
- การเล่นภาพเคลื่อนไหว Lottie; การโต้ตอบต้องการรหัสเพิ่มเติม
- รันไทม์ของเครื่องสถานะนำลักษณะการทำงานที่เขียนแล้วกลับเข้ามาในไฟล์
คำถามที่พบบ่อย
แหล่งที่มา
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (แอร์บีเอ็นบี)
- State Machine Playback — เอกสาร Rive