Authentic motionJust as the shape o

Authentic motion

Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.
Contents
Mass and weight
Mass and weight

In the physical world, forces must be applied to an object in order for it to move. The strength and duration of these forces dictate how quickly an object accelerates, decelerates, or changes direction. Even the most jarring stops and starts are not instantaneous, because it takes time for an object to speed up or slow down. Consequently, when animations have abrupt starts, stops, or changes in direction, they appear unnatural.

Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.
Natural acceleration and deceleration

Changes in acceleration or deceleration should be smooth across the duration of an animation.

To draw attention to an object for a specific purpose, or to add character to an animation, vary its change in speed when starting and stopping.
Asymmetric acceleration and deceleration creates a more natural and delightful motion.
When acceleration or deceleration isn’t smooth, movement appears mechanical. Abrupt changes in speed or direction are jarring and draw attention.
Avoid linear motion.
Entrances and exits

Changes in an object’s speed and direction draw user attention.

An object’s change in speed as it enters or exits the frame suggests the distance it is traveling. For example, slowing down while exiting draws attention and implies the object will stop near the frame edge.

During transitions in particular, consider what portion of the entrance or exit should receive the most attention.
Do.
Changes in the ball’s speed emphasize its arrival at and departure from the resting position. Attention is minimized when the ball enters and exits the frame at a near-constant speed.
Don't.
Speeding up when entering, and slowing down when exiting, can draw unwanted attention and distract the user.
About easing terms

When discussing timing curves, it is important to understand the definitions being used. The terms “ease in” and “ease out” are used in both traditional animation and UX animation. However, depending on the context, these terms have opposing meanings.

Traditional animation

Traditional animation techniques express a sequence of movements through drawings of key poses. “Ease out” in this context refers to motion departing from a pose and “ease in” refers to motion entering a pose.

Modern animation tools express these key poses with keyframes. “Ease in” and “ease out” in this context refer to motion leading into and out of a keyframe.

UX animation

In the UX context, easing refers to the transition between states. As a result, “ease in” refers to the motion entering the transition, and “ease out” refers to the motion leaving the transition.
Making adjustments

Not all objects move the same way. Lighter or smaller objects may move faster because they require less force, and larger or heavier objects may need more time to speed up.

Use curved motion and avoid linear spatial paths. Identify the qualities of motion best suited to your object, and represent their motion accordingly. Curves represent that change over time, for a particular value range. Find a curve that fits that character of motion you are describing.

ผลลัพธ์ (ไทย) 1:

เคลื่อนไหวที่แท้จริงเช่นเดียวกับรูปร่างของวัตถุบ่งชี้ลักษณะอาจการทำงาน ดูย้ายวัตถุการแสดงว่า เป็นแสง หนัก ยืดหยุ่น แข็ง ขนาดเล็ก หรือขนาดใหญ่ ในโลกของการออกแบบวัสดุ เคลื่อนไหวอธิบายเชิงพื้นที่ความสัมพันธ์ ฟังก์ชัน และความตั้งใจกับความงามและการไหลเนื้อหามวลและน้ำหนักมวลและน้ำหนักในโลก กองต้องถูกประยุกต์ใช้กับวัตถุเพื่อให้ย้าย ความแรงและระยะเวลาของกองกำลังเหล่านี้บอกความเร็ววัตถุเร่ง decelerates หรือเปลี่ยนทิศทาง แม้สุดสั่นสะเทือนหยุดและเริ่มต้นไม่ได้ทันที เนื่องจากมันใช้เวลาสำหรับวัตถุจะเร็วขึ้น หรือช้าลง ดังนั้น เมื่อมีภาพเคลื่อนไหวเริ่มทันทีทันใด หยุด หรือการเปลี่ยนแปลงในทิศทาง ที่ปรากฏผิดธรรมชาติเคลื่อนไหวในการออกแบบวัสดุควรโอบกอดความคุ้นเคยและจริงพฤติกรรมของวัตถุทางกายภาพ ไม่เสียสละ และสง่างาม เรียบง่าย ความงามธรรมชาติเร่งและชะลอตัวเปลี่ยนแปลงในการเร่งหรือชะลอความเร็วที่ควรจะเรียบทั้งระยะเวลาของภาพเคลื่อนไหวเพื่อดึงความสนใจไปวัตถุสำหรับวัตถุประสงค์เฉพาะ หรือ เพื่อเพิ่มอักขระภาพเคลื่อนไหว เปลี่ยนแปลงความเร็วเมื่อเริ่มต้น และหยุดสมมาตรความเร่งและชะลอตัวสร้างการเคลื่อนไหวที่เป็นธรรมชาติ และสวยงามเมื่อเร่งความเร็วหรือชะลอตัวไม่เรียบ เคลื่อนไหวปรากฏกล เปลี่ยนแปลงความเร็วหรือทิศทางอย่างกระทันหันจะสั่นสะเทือน และดึงความสนใจหลีกเลี่ยงการเคลื่อนที่เชิงเส้นทางเข้าและทางออกการเปลี่ยนแปลงความเร็วและทิศทางของวัตถุดึงดูดความสนใจของผู้ใช้เปลี่ยนแปลงความเร็วของวัตถุมันเข้าสู่ หรือออกจากกรอบแนะนำระยะทางที่จะเดินทางไป เช่น ชะลอตัวลงในขณะที่ออกจากดึงความสนใจ และแสดงถึงวัตถุจะหยุดการใกล้ขอบเฟรมในระหว่างการเปลี่ยนโดยเฉพาะอย่างยิ่ง พิจารณาส่วนไหนของทางเข้า หรือทางออกควรได้รับความสนใจมากที่สุดทำเปลี่ยนแปลงความเร็วของลูกบอลเน้นการเดินทางมาถึงและออกจากตำแหน่งอย่าง ความสนใจจะลดลงเมื่อลูกเข้าสู่ และออกจากกรอบที่มีความเร็วใกล้คงไม่เพิ่มขึ้นเมื่อเข้า และช้าลงเมื่อออกจากโปรแกรม สามารถดึงความสนใจที่ไม่พึงประสงค์ และกวนใจผู้ใช้เกี่ยวกับเงื่อนไขการผ่อนคลายเมื่อพูดถึงเวลาโค้ง มันจะต้องเข้าใจข้อกำหนดของการใช้ เงื่อนไข "ความง่ายดายในการ" และ "ช่วยออก" ที่ใช้ในแบบเคลื่อนไหวและภาพเคลื่อนไหว UX แต่ ขึ้นอยู่กับบริบท ข้อกำหนดเหล่านี้มีความหมายตรงข้ามกันภาพเคลื่อนไหวแบบดั้งเดิมเทคนิคการเคลื่อนไหวแบบดั้งเดิมแสดงลำดับการเคลื่อนไหวของภาพวาดของท่าที่สำคัญ "ช่วยออก" ในบริบทนี้หมายถึงเดินทางออกจากท่าการเคลื่อนไหว และ "ความสะดวกใน" หมายถึงเข้าก่อให้เกิดการเคลื่อนไหวเครื่องมือทันสมัยภาพเคลื่อนไหวแสดงท่าทางเหล่านี้สำคัญกับเฟรม "ความสะดวกใน" และ "ง่ายออก" ในบริบทนี้หมายถึงเคลื่อนที่นำเข้า และ ออกคีย์เฟรมUX animationIn the UX context, easing refers to the transition between states. As a result, “ease in” refers to the motion entering the transition, and “ease out” refers to the motion leaving the transition.Making adjustmentsNot all objects move the same way. Lighter or smaller objects may move faster because they require less force, and larger or heavier objects may need more time to speed up.Use curved motion and avoid linear spatial paths. Identify the qualities of motion best suited to your object, and represent their motion accordingly. Curves represent that change over time, for a particular value range. Find a curve that fits that character of motion you are describing.

ผลลัพธ์ (ไทย) 2:

การเคลื่อนไหวของแท้เช่นเดียวกับรูปร่างของวัตถุที่บ่งชี้ว่ามันอาจประพฤติชมย้ายวัตถุแสดงให้เห็นไม่ว่าจะเป็นแสงหนักและมีความยืดหยุ่นแข็งขนาดเล็กหรือใหญ่ ในโลกของการออกแบบวัสดุที่เคลื่อนไหวอธิบายความสัมพันธ์เชิงพื้นที่การทำงานและความตั้งใจกับความงามและความลื่นไหล. สารบัญมวลและน้ำหนักมวลและน้ำหนักในโลกทางกายภาพกองทัพจะต้องนำไปใช้กับวัตถุในเพื่อให้มันย้าย ความแข็งแรงและระยะเวลาของกองกำลังเหล่านี้กำหนดวิธีการอย่างรวดเร็ววัตถุเร่งชะลอหรือเปลี่ยนทิศทาง แม้จะหยุดสั่นสะเทือนมากที่สุดและเริ่มต้นไม่ได้ทันทีเพราะมันต้องใช้เวลาสำหรับวัตถุที่จะเพิ่มหรือลดความเร็วลง ดังนั้นเมื่อภาพเคลื่อนไหวที่มีการเริ่มต้นอย่างกระทันหันหยุดหรือการเปลี่ยนแปลงในทิศทางที่พวกเขาดูเหมือนเป็นธรรมชาติ. โมชั่นในการออกแบบวัสดุที่ควรจะโอบกอดความคุ้นเคยและโลกแห่งความจริงพฤติกรรมของวัตถุทางกายภาพโดยไม่ต้องเสียสละความสง่างามที่เรียบง่ายและความงาม. ความเร็วและความเร่งธรรมชาติการเปลี่ยนแปลง ในการเร่งหรือชะลอตัวควรจะเรียบทั่วระยะเวลาของภาพเคลื่อนไหว. จะดึงความสนใจไปยังวัตถุเพื่อวัตถุประสงค์เฉพาะหรือเพื่อเพิ่มตัวอักษรในการเคลื่อนไหวที่แตกต่างกันไปการเปลี่ยนแปลงในความเร็วเมื่อเริ่มต้นและหยุด. เร่งความเร็วไม่สมมาตรและการชะลอตัวสร้างขึ้น การเคลื่อนไหวที่เป็นธรรมชาติและน่ารื่นรมย์. เมื่อการเร่งหรือชะลอตัวไม่ราบรื่นเคลื่อนไหวปรากฏกล การเปลี่ยนแปลงอย่างฉับพลันในความเร็วหรือทิศทางที่มีการสั่นสะเทือนและดึงดูดความสนใจ. หลีกเลี่ยงการเคลื่อนไหวเชิงเส้น. ทางเข้าและทางออกการเปลี่ยนแปลงในความสนใจของความเร็วและวาดทิศทางการใช้วัตถุ. การเปลี่ยนแปลงของวัตถุความเร็วในขณะที่มันเข้ามาหรือออกจากกรอบที่แสดงให้เห็นระยะทางที่จะมีการเดินทาง ยกตัวอย่างเช่นการชะลอตัวลงในขณะที่ออกจากดึงความสนใจและหมายถึงวัตถุที่จะหยุดใกล้ขอบกรอบ. ในช่วงการเปลี่ยนผ่านโดยเฉพาะอย่างยิ่งพิจารณาสิ่งที่เป็นส่วนหนึ่งของทางเข้าหรือทางออกที่ควรจะได้รับความสนใจมากที่สุด. อยเปลี่ยนแปลงในความเร็วของลูกกอล์ฟที่เน้นการมาถึงของที่ และเดินทางออกจากตำแหน่งที่พักผ่อน ความสนใจจะลดลงเมื่อลูกเข้าและออกจากกรอบที่ความเร็วใกล้อย่างต่อเนื่อง. ไม่. เร่งเมื่อเข้าและการชะลอตัวลงเมื่อออกสามารถดึงดูดความสนใจที่ไม่พึงประสงค์และหันเหความสนใจของผู้ใช้. เกี่ยวกับการผ่อนคลายข้อตกลงเมื่อคุยโค้งระยะเวลา มันเป็นสิ่งสำคัญที่จะเข้าใจคำจำกัดความที่ใช้ คำว่า "ความสะดวกในการ" และ "ความสะดวกในการออก" ถูกนำมาใช้ทั้งในภาพเคลื่อนไหวแบบดั้งเดิมและ UX นิเมชั่น แต่ขึ้นอยู่กับบริบทเงื่อนไขเหล่านี้มีความหมายตรงข้าม. นิเมชั่นแบบดั้งเดิมเทคนิคการเคลื่อนไหวแบบดั้งเดิมแสดงลำดับของการเคลื่อนไหวผ่านภาพวาดของการโพสท่าที่สำคัญ "ผ่อนคลายออก" ในบริบทนี้หมายถึงการเคลื่อนไหวที่ออกเดินทางจากท่าและ "ความสะดวกในการ" หมายถึงการเคลื่อนไหวเข้ามาก่อให้เกิด. เครื่องมือนิเมชั่นโมเดิร์นแสดงการโพสท่าที่สำคัญเหล่านี้ด้วยคีย์เฟรม "ความง่ายใน" และ "ความสะดวกในการออก" ในบริบทนี้หมายถึงการเคลื่อนไหวที่นำเข้าและออกจากคีย์เฟรม. UX นิเมชั่นในบริบท UX บรรเทาหมายถึงการเปลี่ยนแปลงระหว่างรัฐ เป็นผลให้ "ความสะดวกในการ" หมายถึงการเคลื่อนไหวเข้าสู่การเปลี่ยนแปลงและ "ง่ายออก" หมายถึงการเคลื่อนไหวออกจากการเปลี่ยนแปลง. การปรับเปลี่ยนไม่ได้ย้ายวัตถุทั้งหมดในลักษณะเดียวกัน วัตถุที่มีน้ำหนักเบาหรือขนาดเล็กอาจย้ายได้เร็วขึ้นเพราะพวกเขาต้องการแรงน้อยลงและวัตถุขนาดใหญ่หรือหนักอาจต้องใช้เวลามากขึ้นเพื่อเพิ่มความเร็ว. ใช้เคลื่อนไหวโค้งและหลีกเลี่ยงเส้นทางที่เชิงพื้นที่เชิงเส้น ระบุคุณภาพของการเคลื่อนไหวดีให้เหมาะกับวัตถุของคุณและเป็นตัวแทนการเคลื่อนไหวของพวกเขาตาม เส้นโค้งเป็นตัวแทนของการเปลี่ยนแปลงอยู่ตลอดเวลาสำหรับช่วงคุ้มค่าโดยเฉพาะอย่างยิ่ง หาเส้นโค้งที่เหมาะกับตัวละครที่การเคลื่อนไหวของคุณกำลังอธิบาย