เครื่องมือแก้ไขของ Downcodes จะพาคุณไปเรียนรู้เกี่ยวกับฟีเจอร์เลย์เอาต์ล่าสุดของ Rive! แก้ปัญหาการปรับหน้าจอสำหรับนักออกแบบและนักพัฒนาได้อย่างสมบูรณ์ ทำให้การสร้างกราฟิกแอนิเมชั่นที่ตอบสนองแบบไดนามิกง่ายกว่าที่เคย แทนที่จะสร้างเวอร์ชันแยกสำหรับอุปกรณ์และขนาดหน้าจอที่แตกต่างกัน เลย์เอาต์สามารถปรับให้เข้ากับแพลตฟอร์มต่าง ๆ ได้โดยอัตโนมัติเพื่อให้แน่ใจว่าเอฟเฟกต์แอนิเมชั่นสอดคล้องกัน นอกจากนี้ยังรองรับหลายภาษาและปรับขนาดเลย์เอาต์โดยอัตโนมัติเพื่อปรับให้เข้ากับความยาวของข้อความของภาษาต่างๆ ไม่ต้องสงสัยเลยว่านี่จะเป็นประโยชน์อย่างมากสำหรับนักพัฒนาที่แสวงหาประสบการณ์ด้านภาพที่สอดคล้องกันบนแพลตฟอร์มต่างๆ
ในที่สุดนักออกแบบและนักพัฒนาก็สามารถขจัดความกลัวที่จะถูกครอบงำโดย "การปรับหน้าจอ" ได้ในที่สุด Rive ได้เปิดตัวฟีเจอร์ใหม่ที่เรียกว่าเลย์เอาต์ ซึ่งช่วยให้ผู้ใช้สามารถสร้างกราฟิกแอนิเมชั่นแบบไดนามิกและตอบสนองที่สามารถ ปรับให้เข้ากับอุปกรณ์และขนาดหน้าจอที่แตกต่างกันได้โดย อัตโนมัติ ในขณะที่ รักษาการโต้ตอบอันเป็นเอกลักษณ์ของ Rive และภาพเคลื่อนไหวที่ราบรื่น
จุดเด่นประการหนึ่งของเลย์เอาต์คือความเข้ากันได้ข้ามอุปกรณ์ การเปลี่ยนกราฟิกระหว่างแผงหน้าปัดรถยนต์และสมาร์ทโฟนเป็นไปอย่างราบรื่น ช่วยให้ภาพมีความสม่ำเสมอ นักออกแบบจำเป็นต้องสร้างกราฟิกเพียงครั้งเดียว และกราฟิกจะปรับข้ามแพลตฟอร์มโดยอัตโนมัติ ทำให้ไม่จำเป็นต้องสร้างเวอร์ชันแยกกันสำหรับแต่ละแพลตฟอร์ม
เค้าโครงยังรองรับหลายภาษา ด้วยความสามารถในการปรับขนาดเค้าโครงโดยอัตโนมัติตามความยาวของภาษา ตัวอย่างเช่น เมื่อข้อความยาว เค้าโครงสามารถจัดเรียงหรือปรับขนาดกล่องข้อความใหม่เพื่อรองรับข้อกำหนดในการแสดงผลของภาษาต่างๆ เพื่อให้แน่ใจว่าการแสดงผลจะสอดคล้องกันในทุกภาษา และนักพัฒนาไม่จำเป็นต้องกังวลเกี่ยวกับปัญหาเค้าโครงที่อาจเกิดขึ้นในภาษาต่างๆ
สำหรับนักออกแบบที่ต้องการสร้างเลย์เอาต์ที่ซับซ้อน เลย์เอาต์เสนอตัวเลือกสำหรับเลย์เอาต์ที่ซ้อนกันลึกและยืดหยุ่น นักออกแบบสามารถใช้ตัวเลือกการจัดตำแหน่ง การตัดคำ และระยะห่างเพื่อสร้างเค้าโครง UI ที่ซับซ้อน เช่น องค์ประกอบ UI หลายระดับ หรือโครงสร้างที่ซับซ้อนที่ต้องปรับเปลี่ยนบนหน้าจอต่างๆ
เลย์เอาต์ยัง รองรับเบรกพอยต์ ซึ่งสามารถทริกเกอร์เครื่องสถานะของ Rive เพื่อทำแอนิเมชั่นที่แตกต่างกันหรือเปลี่ยนเลย์เอาต์ตามการเปลี่ยนแปลงความกว้าง ความสูง หรือสัดส่วนของส่วนประกอบ ตัวอย่างเช่น เค้าโครงสามารถสลับไปยังเค้าโครงหรือสถานะภาพเคลื่อนไหวอื่นได้โดยอัตโนมัติเมื่อหน้าจอเปลี่ยนจากแนวนอนเป็นแนวตั้ง
แตกต่างจากเครื่องมือออกแบบอื่นๆ Rive Layouts ช่วยให้นักออกแบบสามารถเลือกได้อย่างอิสระว่าวัตถุจะมีส่วนร่วมในกลไกเค้าโครงหรือไม่ และยังสามารถแหกกฎเค้าโครงได้ตลอดเวลาและออกแบบได้อย่างอิสระ ซึ่งหมายความว่านักออกแบบสามารถฝังองค์ประกอบฟรี เช่น ตัวละครที่เคลื่อนไหวได้สูง ลงในเลย์เอาต์ที่มีโครงสร้างมากขึ้นเพื่อเอฟเฟกต์การออกแบบที่ยืดหยุ่น แม้ว่าจะมีการปรับเปลี่ยนเค้าโครง ภาพเคลื่อนไหวของตัวละครยังคงลื่นไหลและไม่ถูกจำกัดโดยกลไกเค้าโครง
นอกจากนี้ เลย์เอาต์ยังรองรับการทำงานร่วมกับระบบข้อจำกัด (Constraints) ของ Rive อีกด้วย ช่วยให้คุณแยกตัวออกจากความสัมพันธ์แบบลำดับชั้นแบบดั้งเดิมในการออกแบบ แม้ว่าเค้าโครง UI จะเปลี่ยนไป ภาพเคลื่อนไหวก็สามารถรักษาตำแหน่งและรูปร่างดั้งเดิมได้อย่างแม่นยำและควบคุมได้ เพื่อให้มั่นใจถึงความเสถียรของเอฟเฟกต์ภาพ ตัวอย่างเช่น เมื่อเค้าโครงหน้าเปลี่ยนแปลง ระบบข้อจำกัดจะปรับองค์ประกอบที่เกี่ยวข้องโดยอัตโนมัติเพื่อหลีกเลี่ยงความสับสนของเค้าโครง
ส่วนประกอบในเลย์เอาต์สามารถควบคุมได้ผ่านเครื่องสถานะของ Rive ซึ่งจะทำให้เกิดการเปลี่ยนแปลงสถานะที่แตกต่างกันตามความกว้าง ความสูง หรือสัดส่วนของส่วนประกอบ ช่วยให้นักออกแบบสามารถเพิ่มภาพเคลื่อนไหวเชิงโต้ตอบลงในเค้าโครงของตนได้ เช่น การเรียกใช้ลำดับภาพเคลื่อนไหวที่แตกต่างกัน หรือเอฟเฟกต์การตอบสนอง ขึ้นอยู่กับหน้าจอของอุปกรณ์ เครื่องสถานะของ Rive ยังช่วยให้คุณควบคุมทุกรายละเอียดของแอนิเมชั่นในขณะที่มีการปรับเค้าโครง ช่วยให้นักออกแบบสามารถผสมแอนิเมชั่นแบบโต้ตอบและแบบโต้ตอบหลายแบบในการออกแบบเดียวเพื่อให้ผู้ใช้ได้รับประสบการณ์การรับชมที่สมบูรณ์ยิ่งขึ้น
รายละเอียด: https://rive.app/blog/introcing-layouts
โดยรวมแล้ว การเกิดขึ้นของ Rive Layouts ได้นำความสะดวกสบายมาสู่นักออกแบบและนักพัฒนา ทำให้กระบวนการออกแบบแอนิเมชั่นข้ามแพลตฟอร์มง่ายขึ้นอย่างมาก และทำให้การออกแบบแอนิเมชั่นดีขึ้นในระยะที่เข้าถึงได้ ไปสำรวจมันตอนนี้!