เลือกการค่อยๆ เปลี่ยนที่เหมาะสมสำหรับโปรเจ็กต์ของคุณ ไม่ว่าจะเป็นการค่อยๆ เปลี่ยนเข้า ออก หรือทั้งคู่ หรืออาจใช้การตีกลับเพื่อเพิ่มความสนุกสนานด้วยก็ได้
หลังจากพูดถึงตัวเลือกต่างๆ ที่มีให้สำหรับการค่อยๆ เปลี่ยนในภาพเคลื่อนไหวแล้ว คุณควรใช้ประเภทใดในโปรเจ็กต์ และภาพเคลื่อนไหวของคุณควรมีระยะเวลานานเพียงใด
สรุป
- ใช้ภาพเคลื่อนไหวที่ค่อยๆ แสดงง่ายขึ้นสำหรับองค์ประกอบ UI การค่อยๆ เปลี่ยนแบบ Quintic คือวิธีที่ดีมาก รวดเร็วและง่าย
- อย่าลืมใช้ระยะเวลาของภาพเคลื่อนไหว การค่อยๆ ออกและค่อยๆ เข้าควรอยู่ที่ 200-500 มิลลิวินาที ในขณะที่การเด้งตัวและการค่อยๆ เปลี่ยนควรมีความยาวมากกว่า 800 มิลลิวินาที - 1200 มิลลิวินาที
โดยทั่วไปแล้ว การผ่อนคลายจะเป็นการเรียกที่ถูกต้อง และเป็นค่าเริ่มต้นที่ดีอย่างแน่นอน เริ่มเล่นได้เร็ว ทำให้ภาพเคลื่อนไหวมีการตอบสนองอย่างรวดเร็ว ซึ่งถือว่าดี แต่ก็มีการชะลอตัวในช่วงท้าย
มีกลุ่มสมการการค่อยๆ เปลี่ยนที่รู้จักกันดีนอกเหนือจากที่ระบุด้วยคีย์เวิร์ด ease-out ใน CSS ซึ่งมีช่วง "ความเข้มงวด" สำหรับเอฟเฟ็กต์การค่อยๆ ออกอย่างรวดเร็ว ให้ลองใช้ Quintic ease-out
ดูภาพเคลื่อนไหวของการค่อยๆ เปลี่ยน Quintic
คุณควรใช้สมการการค่อยๆ เปลี่ยนแบบอื่นๆ โดยเฉพาะการเด้งตัวหรือการค่อยๆ ยืดหยุ่น ควรใช้เท่าที่จําเป็นและเฉพาะในกรณีที่เหมาะสมกับโปรเจ็กต์ของคุณเท่านั้น มี 2-3 อย่างที่ช่วยให้ผู้ใช้ได้รับประสบการณ์อย่างเช่น ภาพเคลื่อนไหวที่น่าสะพรึงกลัว หากโปรเจ็กต์ไม่ได้มีจุดประสงค์เพื่อความสนุกสนาน ก็อย่าให้องค์ประกอบเด้งไปมาบริเวณ UI ในทางกลับกัน หากคุณต้องการสร้างเว็บไซต์ที่ควรจะอ่านได้อย่างสบายใจ คุณก็ใช้การตีกลับได้
ลองเล่นดูได้ง่ายๆ ดูว่าแบบไหนเข้ากับลักษณะโปรเจ็กต์ของคุณ แล้วเริ่มจากตรงนั้น ดูรายการประเภทการค่อยๆ เปลี่ยนทั้งหมดพร้อมการสาธิตได้ที่ easings.net
เลือกระยะเวลาของภาพเคลื่อนไหวที่เหมาะสม
ภาพเคลื่อนไหวที่เพิ่มลงในโปรเจ็กต์ต้องมีระยะเวลาที่ถูกต้อง สั้นเกินไปและภาพเคลื่อนไหวจะดูก้าวร้าวและคมชัด ยาวเกินไป ซึ่งจะเป็นอุปสรรคและน่ารำคาญ
- การค่อยๆ ออก: ประมาณ 200 - 500 มิลลิวินาที วิธีนี้ทำให้สายตามีโอกาสเห็นภาพเคลื่อนไหว แต่ไม่รู้สึกว่ากีดขวาง
- การค่อยๆ เปลี่ยน: ประมาณ 200 - 500 มิลลิวินาที โปรดทราบว่าอุปกรณ์จะล็อกในตอนท้าย และการเปลี่ยนแปลงช่วงเวลาจะไม่ทำให้ผลกระทบนั้นเบาลง
- เอฟเฟกต์ตีกลับหรือยืดหยุ่น: ประมาณ 800 - 1200 มิลลิวินาที คุณต้องรอให้มีเอฟเฟกต์ยืดหยุ่นหรือเด้งตัวขึ้นเพื่อ "ตกลง" หากไม่มีเวลาเพิ่ม ส่วนที่เด้งตัวขึ้นของภาพเคลื่อนไหวก็จะดูก้าวร้าวและไม่เหมาะกับสายตา
แน่นอนว่านี่เป็นเพียงหลักเกณฑ์ ทดลองใช้วิธีง่ายๆ และเลือกสิ่งที่เหมาะกับโปรเจ็กต์ของคุณ