Purposeful animation
Review the purpose, frequency, and spatial rules of motion for a consistent experience.
Preview
Live preview
Motion should serve a function — orient, give feedback, show relationships — not just decorate.
Authoritative vocabulary
Definition and close-term distinctions
English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.
purposeful-animationPurposeful animation
有目的的动效Authoritative definition
Motion should serve a function — orient, give feedback, show relationships — not just decorate.
Chinese translation
动效应承担明确功能，例如帮助定位、提供反馈或展示关系，而非只作装饰。
frequency-of-useFrequency of use
使用频率Authoritative definition
The more often a user sees an animation, the shorter and subtler it should be.
Chinese translation
用户看到一段动画的频率越高，它就应越短、越克制。
Distinction
Frequency of use determines how short and subtle motion should be; Purposeful animation determines the function it serves.
spatial-consistencySpatial consistency
空间一致性Authoritative definition
Animating so an element keeps its identity and position across states, so users never lose track of where things went.
Chinese translation
让元素在不同状态之间保持身份与空间位置的连续，使用户始终知道内容去了哪里。
Distinction
Spatial consistency preserves identity and position across states; Purposeful animation supplies the reason for that continuity.
Design contract
Decide before this motion ships
Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.
Review whether every motion pattern serves orientation, feedback, relationship explanation, or perceived performance.
Apply during design review, implementation review, and pre-release, with stricter restraint for frequent motion.
Trigger review from new motion, interaction changes, or user feedback, documenting a testable purpose.
Derive enter and exit rules from information relationships and remove travel with no explainable source or destination.
Require frequent interactions to be interruptible and give low-frequency narratives a skip or fast-complete path.
Gesture motion follows input, supports cancellation, and has a keyboard alternative, while decorative motion consumes no gestures.
Provide an equivalent low-motion expression for each purpose while preserving function and state information.
Review notes
Pre-delivery review
- Document purpose, frequency, and spatial rules.
- Remove decorative motion with no user-understanding or feedback benefit.
Accessibility
Keep information accessible
Reduced motion
Provide an equivalent low-motion expression for each purpose while preserving function and state information.