เรียนรู้วิธีปรับให้ภาพนุ่มนวลและการถ่วงน้ำหนักภาพเคลื่อนไหว
ไม่มีสิ่งใดในธรรมชาติที่เคลื่อนไหวแบบเชิงเส้นจากจุดหนึ่งไปยังอีกจุดหนึ่ง ในความเป็นจริง สิ่งต่างๆ มีแนวโน้มที่จะเร่งหรือลดลงตามเวลาที่เคลื่อนที่ สมองของเราถูกบังคับให้คาดหวังในการเคลื่อนไหวแบบนี้ ดังนั้นเวลาสร้างภาพเคลื่อนไหว คุณควรใช้สิ่งนี้ให้เป็นประโยชน์ การเคลื่อนไหวตามธรรมชาติทำให้ผู้ใช้รู้สึกคุ้นเคยกับแอปของคุณมากขึ้น ซึ่งส่งผลให้ประสบการณ์โดยรวมดีขึ้น
สรุป
- การค่อยๆ เปลี่ยนช่วยให้ภาพเคลื่อนไหวดูเป็นธรรมชาติมากขึ้น
- เลือกภาพเคลื่อนไหวที่ใช้งานง่ายสำหรับองค์ประกอบ UI
- หลีกเลี่ยงภาพเคลื่อนไหวที่ค่อยๆ เข้าหรือช้าไป ยกเว้นกรณีที่คุณจะทำให้เป็นภาพเคลื่อนไหวสั้นๆ เพราะอาจทำให้ผู้ใช้ปลายทางรู้สึกเอื่อยๆ
ในแอนิเมชันคลาสสิก คำว่าการเคลื่อนไหวที่เริ่มต้นอย่างช้าๆ และเร่งความเร็วคือ "ค่อยๆ เข้า" และสำหรับการเคลื่อนไหวที่เริ่มต้นอย่างรวดเร็วและค่อยๆ ลดความเร็วคือ "ช้า" คำศัพท์ที่ใช้กันโดยทั่วไปบนเว็บคือ "เข้าใจได้ง่าย" และ "ค่อยๆ ออก" ตามลำดับ บางครั้งทั้ง 2 อย่างจะรวมเข้าด้วยกัน ซึ่งเรียกว่า "ค่อยๆ เข้า" การค่อยๆ เปลี่ยนคือขั้นตอนการทำให้ภาพเคลื่อนไหวมีความรุนแรงหรือออกเสียงน้อยลง
การค่อยๆ เปลี่ยนคีย์เวิร์ด
ทั้งการเปลี่ยนและภาพเคลื่อนไหวของ CSS ช่วยให้คุณเลือกประเภทการค่อยๆ เปลี่ยนที่ต้องการใช้สำหรับภาพเคลื่อนไหว คุณใช้คีย์เวิร์ดที่ส่งผลต่อการค่อยๆ เปลี่ยน (หรือ timing ที่บางครั้งก็เรียกว่า) ของภาพเคลื่อนไหวที่เป็นปัญหาได้ นอกจากนี้ คุณยังกําหนดการค่อยๆ เปลี่ยนด้วยตนเองได้ ซึ่งให้อิสระแก่คุณมากขึ้นในการแสดงลักษณะของแอป
คีย์เวิร์ดบางส่วนที่คุณใช้ใน CSS ได้มีดังนี้
linearease-inease-outease-in-out
ที่มา: CSS Transitions, W3C
นอกจากนี้คุณยังใช้คีย์เวิร์ด steps ได้ ซึ่งช่วยให้คุณสร้างการเปลี่ยนที่มีขั้นตอนที่แยกกันได้ แต่คีย์เวิร์ดที่แสดงด้านบนจะมีประโยชน์มากที่สุดในการสร้างภาพเคลื่อนไหวที่ดูเป็นธรรมชาติ
ภาพเคลื่อนไหวเชิงเส้น
ภาพเคลื่อนไหวที่ไม่มีลักษณะการค่อยๆ เปลี่ยนเรียกว่าเชิงเส้น กราฟของการเปลี่ยนเชิงเส้นมีลักษณะดังนี้
เมื่อเวลาผ่านไป ค่าจะเพิ่มขึ้นเป็นจำนวนเท่ากัน การเคลื่อนไหวแบบเชิงเส้นมักจะดูเหมือนเป็นหุ่นยนต์และไม่เป็นธรรมชาติ ผู้ใช้จึงรู้สึกว่าน่าตกใจ โดยทั่วไปแล้วคุณควรหลีกเลี่ยงการเคลื่อนไหวเชิงเส้น
ไม่ว่าคุณจะเขียนโค้ดภาพเคลื่อนไหวโดยใช้ CSS หรือ JavaScript คุณจะเห็นว่ามีตัวเลือกสำหรับการเคลื่อนที่เชิงเส้นเสมอ
เพื่อให้บรรลุผลข้างต้นด้วย CSS โค้ดจะมีลักษณะดังนี้
transition: transform 500ms linear;
ภาพเคลื่อนไหวที่ใช้งานง่าย
การค่อยๆ เปลี่ยนจะทำให้ภาพเคลื่อนไหวเริ่มเล่นเร็วกว่าแบบเชิงเส้นและลดลงในตอนท้าย
การค่อยๆ เปลี่ยนมักเป็นวิธีที่ดีที่สุดสำหรับการทำงานของอินเทอร์เฟซผู้ใช้ เนื่องจากการเริ่มต้นอย่างรวดเร็วจะทำให้ภาพเคลื่อนไหวรู้สึกถึงการตอบสนอง ในขณะที่ยังคงทำให้การทำงานช้าลงอย่างเป็นธรรมชาติในตอนท้าย
มีหลายวิธีที่จะสร้างผลลัพธ์ได้อย่างง่ายดาย แต่วิธีที่ง่ายที่สุดคือคีย์เวิร์ด ease-out ใน CSS ดังนี้
transition: transform 500ms ease-out;
ภาพเคลื่อนไหวที่ใช้งานง่าย
ภาพเคลื่อนไหวในการค่อยๆ เปลี่ยนเริ่มต้นอย่างช้าๆ และสิ้นสุดอย่างรวดเร็ว ซึ่งตรงข้ามกับภาพเคลื่อนไหวแบบค่อยๆ เปลี่ยน
ภาพเคลื่อนไหวประเภทนี้เป็นเหมือนหินก้อนหนักที่ตกลงมา โดยจะเริ่มช้าๆ และกระแทกพื้นอย่างรวดเร็วพร้อมกับจังหวะที่เดือดปุดๆ
อย่างไรก็ตาม จากมุมมองของการโต้ตอบ การค่อยๆ เปลี่ยนอาจดูผิดปกติเล็กน้อยเนื่องจากจุดจบอย่างฉับพลัน สิ่งต่างๆ ที่เคลื่อนไหวในโลกจริงมีแนวโน้มที่จะลดลงมากกว่าจะหยุดลงอย่างกะทันหัน นอกจากนี้ การค่อยๆ เปลี่ยนยังส่งผลเสียต่อความรู้สึกของผู้ใช้เมื่อเริ่มต้นใช้งานด้วย ซึ่งจะส่งผลเสียต่อความรู้สึกเกี่ยวกับการตอบสนองในเว็บไซต์หรือแอป
คุณจะใช้คีย์เวิร์ดของภาพเคลื่อนไหวได้ง่ายๆ ในลักษณะเดียวกับภาพเคลื่อนไหวแบบค่อยๆ ออกและเชิงเส้น
transition: transform 500ms ease-in;
ภาพเคลื่อนไหวค่อยๆ เข้า-ออก
การค่อยๆ เปลี่ยนทั้งในและนอกรถนั้นคล้ายกับการเร่งความเร็วและลดความเร็ว และการใช้อย่างรอบคอบก็จะให้ผลที่น่าตื่นตาตื่นใจมากกว่าการค่อยๆ ปล่อยความเร็ว
อย่าใช้ระยะเวลาของภาพเคลื่อนไหวที่นานเกินไป เนื่องจากความล่าช้าในการเริ่มต้นภาพเคลื่อนไหว โดยทั่วไปแล้ว ตัวเลขในช่วง 300-500 มิลลิวินาทีจะเหมาะสม แต่จำนวนที่แน่นอนจะขึ้นอยู่กับบรรยากาศของโปรเจ็กต์ แต่เนื่องจากการเริ่มต้นที่ช้า ช่วงกลางที่เร็ว ไปจนถึงช่วงท้ายแบบช้า ทำให้ภาพเคลื่อนไหวมีคอนทราสต์เพิ่มขึ้น ซึ่งค่อนข้างน่าพอใจสำหรับผู้ใช้
ดูภาพเคลื่อนไหวแบบค่อยๆ เข้า-ออก
หากต้องการใช้ภาพเคลื่อนไหวแบบค่อยๆ เข้าระบบ ให้ใช้คีย์เวิร์ด CSS ease-in-out ต่อไปนี้
transition: transform 500ms ease-in-out;