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