Languageไทย▾
ฟิสิกส์และโทเค็นอ่าน 4 นาทีตุลาคม 2026 คำตอบสั้น ๆ
โทเค็นการเคลื่อนไหวเป็นชื่อค่าของระบบการออกแบบสำหรับภาพเคลื่อนไหว ได้แก่ ระยะเวลา เส้นโค้งการค่อยๆ เปลี่ยน การตั้งค่าสปริง และบางครั้งระยะทาง แทนที่จะเขียนการค่อยๆ ขยาย 300 มิลลิวินาทีในทุกองค์ประกอบ ทีมต่างๆ จะใช้ชื่อ เช่น Motion.duration.medium หรือ Motion.spring.gentle ดังนั้นการเคลื่อนไหวจึงมีความสม่ำเสมอและสามารถเปลี่ยนแปลงได้ในที่เดียว
หลัก Takeaway
- โทเค็นการเคลื่อนไหวจะจัดเก็บการตัดสินใจเกี่ยวกับจังหวะเวลา: ระยะเวลา การคลายตัว ความแข็งของสปริง และการหน่วง
- ตั้งชื่อตามวัตถุประสงค์ (เข้า ออก เน้น) หรือขนาด (สั้น กลาง ยาว)
- จัดชุดเล็กๆ ไว้: ช่วงระยะเวลาไม่กี่ช่วง และเส้นโค้งหรือสปริงเล็กน้อย
- รวมรูปแบบการลดการเคลื่อนไหวสำหรับการเข้าถึง
- เก็บไว้ในไปป์ไลน์โทเค็นเดียวกันกับสีและการเว้นวรรค
ระบบการออกแบบใช้โทเค็นสำหรับสี การเว้นวรรค และการพิมพ์อยู่แล้ว โทเค็นการเคลื่อนไหวใช้แนวคิดเดียวกันกับแอนิเมชั่น พวกเขาเปลี่ยนการตัดสินใจ เช่น "องค์ประกอบเล็กๆ เคลื่อนไหวอย่างรวดเร็วและค่อยๆ ลงตัว" ให้เป็นค่านิยมที่นักออกแบบและนักพัฒนาทุกคนใช้
ชุดทั่วไปประกอบด้วยระยะเวลา (สั้น กลาง ยาว) เส้นโค้งการผ่อนผัน (มาตรฐาน เข้า ออก) และสปริงที่กำหนดโดยความแข็ง การหน่วง และมวลเพิ่มมากขึ้น สปริงได้รับความนิยมเนื่องจากให้ความรู้สึกเป็นธรรมชาติและรับมือกับการขัดจังหวะในโค้ดได้ดี
การตั้งชื่อมีความสำคัญ ชื่อตามวัตถุประสงค์ เช่น Motion.enter หรือ Motion.emphasis จะนำไปใช้ได้อย่างถูกต้องง่ายกว่าตัวเลขดิบ จัดชุดให้เล็กลง หากทุกส่วนประกอบมีเส้นโค้งของตัวเอง โทเค็นจะหยุดทำงาน
การเข้าถึงก็อยู่ในโทเค็นเช่นกัน กำหนดสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้เปิดการเคลื่อนไหวแบบลดความเร็ว เช่น การเฟดที่สั้นลงแทนที่จะเป็นการเคลื่อนไหวขนาดใหญ่ ดังนั้นทุกส่วนประกอบจึงจัดการในลักษณะเดียวกัน
โดยปกติโทเค็นจะถูกเก็บไว้ใน JSON และเปลี่ยนเป็นตัวแปร CSS, Swift, Kotlin หรือ JavaScript โดยเครื่องมือสร้างโทเค็น Motion Token Generator ฟรีของเราสร้างชุดเริ่มต้นที่คุณสามารถปรับเปลี่ยนได้
ฉันต้องมีโทเค็นการเคลื่อนไหวจำนวนเท่าใด
น้อยกว่าที่คุณคิด ระยะเวลาสามหรือสี่ช่วงและเส้นโค้งหรือสปริงคลายตัวสองหรือสามช่วงครอบคลุมผลิตภัณฑ์ส่วนใหญ่
โทเค็นการเคลื่อนไหวควรใช้สปริงหรือระยะเวลา?
ทั้งสองสามารถทำงานได้ สปริงให้ความรู้สึกเป็นธรรมชาติมากขึ้นสำหรับการเคลื่อนไหวแบบโต้ตอบและแบบขัดจังหวะ ระยะเวลาจะง่ายกว่าสำหรับการเฟดและการเปลี่ยน CSS
โทเค็นการเคลื่อนไหวจัดการกับการเคลื่อนไหวที่ลดลงได้อย่างไร
กำหนดค่าทางเลือก เช่น การเปลี่ยนที่สั้นลงหรือเฉพาะความทึบ ซึ่งจะใช้เมื่อผู้ใช้เปิดการเคลื่อนไหวที่ลดลง
Figma สามารถจัดเก็บโทเค็นการเคลื่อนไหวได้หรือไม่
คุณสามารถจัดเก็บค่าตัวเลขในตัวแปร Figma ได้ แต่วิธีการเชื่อมต่อกับการเปลี่ยนต้นแบบนั้นมีจำกัด ทีมส่วนใหญ่เก็บแหล่งที่มาของความจริงไว้ในไฟล์โทเค็น
คำแนะนำและตัวอย่างที่เกี่ยวข้อง
สร้างชุดเริ่มต้นของโทเค็นการเคลื่อนไหว
เลือกระยะเวลา การค่อยๆ เปลี่ยนและสปริง ดูตัวอย่าง และส่งออกโทเค็นสำหรับ CSS และ JSON ฟรี.