ข้อมูลพื้นฐานของการค่อยๆ เปลี่ยน

ดูวิธีปรับให้นุ่มนวลและให้น้ำหนักแก่ภาพเคลื่อนไหว

ไม่มีสิ่งใดตามธรรมชาติที่เคลื่อนที่เป็นเส้นตรงจากจุดหนึ่งไปยังอีกจุดหนึ่ง ในความเป็นจริง สิ่งต่างๆ มักจะเพิ่มขึ้นหรือลดลงในขณะที่เคลื่อนไหว สมองคนเราต้องการคาดหวังการเคลื่อนไหวประเภทนี้ ดังนั้นเมื่อสร้างภาพเคลื่อนไหว คุณควรใช้สิ่งนี้ให้เป็นประโยชน์ การเคลื่อนไหวที่เป็นธรรมชาติจะทำให้ผู้ใช้รู้สึกสะดวกใจกับแอปมากขึ้น ซึ่งส่งผลให้ประสบการณ์โดยรวมดีขึ้น

สรุป

• การค่อยๆ เปลี่ยนทำให้ภาพเคลื่อนไหวดูเป็นธรรมชาติมากขึ้น
• เลือกภาพเคลื่อนไหวที่ค่อยๆ ออกสำหรับองค์ประกอบ UI
• หลีกเลี่ยงภาพเคลื่อนไหวที่ค่อยๆ เข้าหรือค่อยๆ เข้าง่าย เว้นแต่คุณจะทำให้สั้นเข้าไว้ พวกเขามีแนวโน้มที่จะไม่พัฒนาสำหรับผู้ใช้ปลายทาง

ในแอนิเมชันคลาสสิก คำว่าการเคลื่อนไหวที่เริ่มต้นอย่างช้าๆ และเร่งความเร็วคือ "ช้า" และสำหรับการเคลื่อนไหวที่เริ่มต้นอย่างรวดเร็วและช้าลงก็คือ "ช้า" คำศัพท์ที่ใช้กันมากที่สุดบนเว็บสำหรับคำศัพท์เหล่านี้คือ "เข้าได้ง่าย" และ "ค่อยๆ เข้า" ตามลำดับ บางครั้ง ทั้ง 2 รูปแบบจะรวมเข้าด้วยกัน ซึ่งเรียกว่า "ค่อยๆ เข้าออก" การค่อยๆ เปลี่ยนนั้นจึงเป็นกระบวนการที่จะทำให้ภาพเคลื่อนไหวมีความชัดเจนและไม่ซับซ้อนน้อยลง

การค่อยๆ เปลี่ยนคีย์เวิร์ด

ทั้งการเปลี่ยนและภาพเคลื่อนไหวของ CSS ช่วยให้คุณเลือกประเภทการค่อยๆ เปลี่ยนที่ต้องการใช้สำหรับภาพเคลื่อนไหวได้ คุณสามารถใช้คีย์เวิร์ดที่มีผลต่อการค่อยๆ เปลี่ยน (หรือ timing ที่เรียกได้ในบางครั้ง) ของภาพเคลื่อนไหวที่เป็นปัญหา นอกจากนี้ คุณยังปรับแต่งการค่อยๆ เปลี่ยนได้อย่างสมบูรณ์ ซึ่งจะให้อิสระคุณมากขึ้นในการแสดงออกถึงบุคลิกภาพของแอป

ตัวอย่างคีย์เวิร์ดที่คุณใช้ได้ใน CSS มีดังนี้

• linear
• ease-in
• ease-out
• ease-in-out

แหล่งที่มา: CSS Transions, 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;