- Get started with motion design in 9 steps: Start Breathing life into your creations
- Arpit Agarwal
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: reid3290
- Proofread by: Starriers, Xekin-Fe
Animation creates life
Animation means a lot of energy and passion, it gives life to static things. In software, animation is not just about pleasing people, it’s about solving problems.
As human beings, we are used to the world revolving around us; If every part of the software also had a consistent animation, it would feel natural and vibrant.
As tech leaders push their products in a more natural direction, complex concepts such as animation design, animated user experience, and user experience choreography are gaining popularity.
Keep in mind that animation, like layout, spacing, typography, and color, can subconsciously build your application’s personality.
Have you ever noticed that when you slide something to the top or bottom of your iPhone, it bounces back? These details may seem trivial, but they play a huge role in building the personality of Apple products.
Cool, let’s start using animation
1. Start observing
Focus on animation: If you can’t see things moving, you can’t animate them. Watch how things move on the screen while using your favorite app; Observe it over and over again, pay attention to the details, and figure out why you like it. Pay attention to all elements that change — shape, size, position, color, etc. No matter how small or large the changes, try to figure out what role the animation plays in the overall composition.
2. Animation is more than a layer of color
Animation reveals a deeper meaning: as a creator, you must consciously take animation into account from the beginning. In the design phase, add animation to the prototype to make it have the dimension of time; During the development phase, modularize the code to make it easier to animate the UI. For modules, see https://medium.com/@acyoo/architecting- ios-developing-at-Zomato-CF894a7fa5e3
Tip: Think carefully about the animation features of your product. This will give your product a character and help you understand at a deeper level what you want to build.
3. Where to introduce animation?
But where to introduce animation?
Simple examples are when the screen is changing, when the user is interacting with interface elements, or when the user has to wait.
4. Animation classification
You can divide the animations in your product into three categories: toggles (content changes/page changes), micro-interactions (like twitter’s like button), and graphic animations (like the jumpy scooter on Zomato’s shopping App’s launch screen).
Classification of animation
5.provided with animationSpatial information
Animation can convey spatial information
If a UI element enters from the right side of the screen, the user mentally places that element on the right. For example, if a burger menu button is in the upper-left corner of the screen, the entry animation for that menu must start on the left side of the screen. Show the animation to others and listen to their opinions to determine whether the spatial information conveyed by the animation is accurate. This is the easiest way to avoid confusion.
6. Start to understand the meaning of concepts like duration, time curves, animation paths, initial and final values
These parameters technically constitute animation. Use these parameters and master them, and once you can control them, you can make great animations. In terms of UI, Google provides some good guidance.
Learn the animation parameters – the animation parameters of the two boxes are the same except for the time curve
7. Never make a user wait in the middle of a process
Never deliberately slow down in the middle of a flow to wait for the animation to complete. If the user must wait, use meaningful animations to entertain them. Keep in mind that animation is used to solve problems at all times. Loading animations exist for a reason. Also, don’t abuse animation in software, software is not movies!
Expert tip: Keeping the subtlety of the animation and keeping it consistent with the product’s story line makes for a pleasant user experience.
8. Related tools
You can use Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics(iOS), etc.
I would recommend using pen and paper to create your ideas before using other digital software. For example, in the animation in this article, I first sketched it using the Animatic App. A good draft makes the rest of the work simple and clear.
Start with pen and paper
9. Capture and save animations that you find interesting
Save animations that you find interesting. Slow down and observe repeatedly to understand the mechanics of movement. Learn by imitation. My Mac is full of GIFs that I find funny. You can also save giFs on Dribbble. In addition, Giphy Capture is an excellent tool for capturing and recording animations on the Mac screen.
fearless
💥 Bonus – Say goodbye to fear
Still afraid to start? Sit down, relax, have some dessert, put on some music. Turn off your phone and keep a pen and paper by your side. Maybe take a nap and try to make yourself comfortable. Take a piece of white paper, pick up a pen and scribble. Take another piece of paper and continue to scribble, lines, shapes, stories. Empty yourself and feel the nib move. Start, all you have to do is start and see where it takes you.
The only thing harder than drawing is getting started. Once you start writing on white paper, whatever you draw, you are creative.
Thanks for reading!
Please enjoy some of my animation works
- My animated wall: Some GIFs I made and their stories. medium.com
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.