Motion
Motion
- Ant Design
- 全局样式
- 전체 스타일
- Global Styles
- 设计模式
- Design Patterns
- 设计模式 - 探索
- Design Patterns (Research)
- Overview
- Template Document
- Global Rules
- 可视化
- Visualization
- 动效
- Motion
- 图形化
- Illustrations
Ant Motion is an animation library based on Ant Design's principles. It is more than just a single library, but also an entire React based solution for modern applications. The goal is to help developers to apply animations in their projects with minimal efforts. Ant Motion provides animations with all levels of granularity - from single action to combination of moves.
Animations bring vividness to interfaces and reinforce user experiences.
We can determine if an animation is effective or not from the following two aspects：
Different from animations usage in typical front-office applications, animations in enterprise level applications spend a great amount of efforts on reinforcing user interactions and the effectiveness of those interactions. Therefore, we derived three animation design principles from Ant Design's core design language:
Intuitive animations usually are backed by law of nature. This requires the animations to be smooth so that their users can feel the animations' motion being justified. A natural animation triggers its users with positive user experiences.
Take button animation as an example, designers image the button as foliage on water - when you press it and release, the leave will slightly go into the water, and then pop back up, creating ripples around itself.
Enterprise level applications require highly effective user interactions. So is their animation design - with a transition time as minimal as possible.
For example, compared to appearing animations, disappearing animations should not attract too much attention from their users. They just need to be concise and clear. Therefore, disappearing animations are configured to swing out with faster velocity and no disappearing delay between each list items - they disappear all at the same time as one unit.
Avoid dramatic and complicated animations. A good animation will get the job done instead of frustrating its users.
For example, when a user expands a menu, his main focus is on the menu content, not the direction change of the arrow icon on the right. Therefore, the animation doesn't need to be very complicated and distracting; it changes just enough to indicate the transition.
For more details, please go to Ant Motion Animation Principles.
The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.
The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.
The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.