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