คำสองคำนี้ตอบคำถามที่แตกต่างกัน Smart Animate ตอบว่า "มีการเปลี่ยนแปลงอะไรบ้าง" โดยจะดูสองเฟรม ค้นหาเลเยอร์ที่มีชื่อตรงกัน และเคลื่อนไหวตำแหน่ง ขนาด การหมุน ความทึบ และคุณสมบัติอื่นๆ จากเฟรมหนึ่งไปยังอีกเฟรมหนึ่ง
คลายคำตอบ "มันเปลี่ยนแปลงไปตามกาลเวลาอย่างไร" Figma ช่วยให้คุณสามารถเลือกเส้นโค้งมาตรฐาน เช่น การค่อยๆ ออก เส้นโค้งลูกบาศก์เบซิเยร์แบบกำหนดเอง หรือสปริง การค่อยๆ เปลี่ยนตามสปริงถูกกำหนดโดยการตั้งค่าทางกายภาพ ความแข็ง การหน่วง และมวล แทนที่จะเป็นระยะเวลาคงที่ ดังนั้นการเคลื่อนที่จะเร็วขึ้นและกำหนดวิธีที่วัตถุจริงทำ
ความแตกต่างที่แท้จริงปรากฏในโค้ด ในผลิตภัณฑ์ สปริงสามารถเริ่มจากตำแหน่งปัจจุบันและความเร็วขององค์ประกอบได้ หากผู้ใช้ขัดจังหวะการเปลี่ยนภาพหรือสะบัดแผ่นงาน การเคลื่อนไหวจะดำเนินต่อไปอย่างเป็นธรรมชาติแทนที่จะกระโดด การเปลี่ยนผ่านต้นแบบจะเล่นในลักษณะเดียวกันทุกครั้ง ซึ่งเป็นเรื่องปกติสำหรับการแสดงเจตนา แต่ไม่ได้แสดงให้เห็นว่าการเคลื่อนไหวมีพฤติกรรมอย่างไรภายใต้อินพุตจริง
ดังนั้นต้นแบบ Figma จึงเป็นข้อมูลอ้างอิงที่ดี แต่นักพัฒนายังคงสร้างการเคลื่อนไหวในโค้ดขึ้นมาใหม่ เพื่อให้ค่าคงที่ หลายทีมจึงบันทึกการตั้งค่าสปริงเป็นสัญญาณการเคลื่อนไหว Figma Animation to Spring Converter ฟรีของเราจะเปลี่ยน Figma Ease ให้เป็นการตั้งค่าสปริงที่คุณสามารถใช้ในโค้ดได้
หากคุณต้องการให้เวอร์ชันโต้ตอบสามารถส่งมอบได้แทนที่จะเป็นข้อมูลอ้างอิง จำเป็นต้องมีเครื่องมือที่มีรันไทม์ ExodeUI ซึ่งเราสร้างจะจัดเก็บสถานะ สปริง และเหตุการณ์ต่างๆ ไว้ในไฟล์เดียวที่ทำงานในแอป