Be it Disney’s Aladdin or Marvel’s Spider-man, we are all familiar with animation. It was all around us! There is something magical with watching an imaginary character moving on your screen.
But, animation are more than that. In this era, animation is more than a tools to entertain children with mouse riding boats (ahem, Mickey). It is also an effective tool for visual communication.
Animations offer a new medium for expression and creativity. It’s definitely more interesting to the eye than still images, right? In this article, we will discuss the definition of animation, types of animation, the basic principles of animation, and of course, how you should get started.
What is Animation?
What even is animation? Animation is a method of capturing still images in succession to create the illusion of continuous movement.
How does it work? Because our eyes can only capture an image for approximately 1/10 second, when many images appear in quick succession, your brain combines them into one moving image. And, there you go, all those images combined frame by frame is what we know as animation.
Okay, so what are the types of animations out there?
1. Traditional animation
Traditional animation is one of the oldest forms of animation in film. Sometimes, it was called cel animation. In traditional animation, objects are drawn on celluloid transparent paper. To create an animation sequence, the animator must draw each frame individually. If you are familiar with flip book, yes, it has the same mechanism. Only on a larger scale.
In previous years, animators would draw on a table that had a light in it, so the creator could see the previous animation. While traditional styles are hardly prevalent today, drawing is generally done on tablets. And manual coloring hasn’t been used by Disney since The Little Mermaid in 1989.
Traditional animation is often in 2D form, but not all 2D animation is a traditional animation. Aladdin and The Lion King are the best examples of traditional animation.
2. 2D Animation (vector-based)
Vector-based 2D animation allows you to control movement here as vectors rather than pixels. So, what does that mean?
Images in familiar formats such as JPG, GIF, and BMP are pixel images. These images cannot be enlarged or reduced without affecting the image quality. Vector graphics don’t have to worry about resolution. A vector is characterized by a path with various starting and ending points, and a line connecting these points to form a graph. You can create shapes to create characters or other images.
3. 3D Animation
3D animation was a game-changer when it was first introduced. Instead of hand-drawn frames, these animated forms use digital software to create and manipulate elements. But, just like 2D animation, motion is still a frame-by-frame operation even though it is a digital process. This means the process is still very tedious. It was created with the help of more computers and software but is still not fully automated.
4. Stop Motion
Since 100 years ago, this form of animation manipulates physical objects rather than images or digital elements to create each frame. Yes, it also takes THAT long.
It’s not a quick process, but stop motion animation is great for projects on a budget because you only need character figures and backgrounds and you don’t need fancy gear.
5. Motion Graphics
Here it is, motion graphics. Because of its ability to be visually pleasing, it is used more often in commercials and film opening sequences than in the film itself. Businesses often use motion graphics to showcase their progressive technology or to convey information in a sophisticated setting.
6. Infographics
Animated infographics can deliver information in a visually pleasing way. Many people prefer infographics over text-only reports as learning media because visual elements are easier to understand.
Also Read: What is The Meaning of Cinematic Video
Animation For Your Business: The Olive To Your Popeye
Animation has become the preferred technology for business. In particular, animation can enhances web/app design and digital marketing campaigns with practical as well as entertainment elements.
Motion graphics illustrate concepts using motion, such as animated objects in web design. Placing motion graphics in the right place on your website can make your site work better, not to mention the nice side benefit of teaching your visitors how to use your site quickly, and efficiently.
For example, let’s just say your company just launched a new feature. But, your analysis says no one clicked on it. How horrible!
What happened? It might be that they don’t see it. People may be so used to the old displays that they don’t even realize the new additions. Don’t panic, you can fix this: add a little animation to the new feature to make the icon move or vibrate a notification dot.
An animation like this can have a nice UX effect. You can add colorful animations to your most popular page options so users can see them. You can increase your conversion rate by using more call-to-action button. Using motion graphics also add add a bit of fun, like a video of an Easter egg moving when the user hovers over it.
Tinder’s iconic swipe (swipe left or right) intensifies the illusion of interaction. It actually feels like you’re moving something. Imagine if, when you swipe, the screen only loads the new profile. No fun!
How To Use Animations For Your Business
There are many more ways to use animation in your business, but take a look at some common examples below.
1. Explanation videos
One of the most popular animations used in business. Animated explanation videos add fun to boring and uninteresting educational videos. Businesses can explain the best of their services without being bored.
2. Microinteractions
Motion graphics offer many UX benefits. If you have problems with interface design, adding animated microinteractions can fill the UX gap. For example, adding an animation effect to a call-to-action can increase conversions.
3. Social Media Videos
The point of animation is to have fun and tell a story. Creating animated videos for social media can help brands stand out and give more appeal to their followers.
4. Ads
Eye-catching and unique animations is an important advantage in advertising videos. Banner ads, in particular, require as much appeal as possible to avoid banner blindness.
5. Animated Logos
While old school advertising says “never change your logo”, today’s branding experts say animation is the exception. Responsive and animated logos (which change depending on how and where they are used) have proven to be more effective than static logos.
Animation For Designers: 12 Basic Principles You Need To Know
Do you know that there is something considered to be “The Bible of Animation”? Disney’s top animators, Frank Thomas and Ollie Johnson have compiled the expertise of Disney animators since the 1930s into a book called The Illusion of Life (1981).
This book explains 12 basic principles of animation, which are still used until now with a little addition here and there.
1. Squash and Stretch
The way an object reacts when it touches another conveys the object’s rigidity and paints a better picture in the viewer’s mind. Think about how the rubber ball breaks when it hits the ground and compare with how it doesn’t.
This effect can be exaggerated for a comic effect or kept realistic for a lively animation. However, one golden rule for both styles is that the total volume of the object doesn’t change, it just redistributes in the change of shapes.
2. Anticipation
In reality, people don’t just jump without bending their knees. They don’t punch without winding their arms. There has to be anticipation before a movement occurs. When animations occur without the expected behavior, they can appear too sudden and annoying. Meaning, it’s fake.
For web design, this means an extra emphasis on pre-animation states. For example, if you want to animate a button being pressed, you need to design the button itself to look like it can be popped or “pressed”.
3. Staging
This principle is borrowed from the theater. Staging is where actors are placed on stage for maximum effect From the audience’s point of view, the action in front of the stage seems more important than the action backstage.
However, animations are more cinematic than theater, so this principle includes lighting and angles. For online animation, consider adding drop shadows or adjusting angles for the best look.
4. Straight-Ahead vs. Pose To Pose
This principle represents the method used for animation. You start with the initial poses and create them sequentially, and you create the main poses throughout the sequence and then “fill” the frames in between.
Most computerized animation uses a pose-to-pose approach because the computer creates the “middle”. But if you’re struggling with designer blocks, the hands-on way can help you come up with ideas.
5. Follow Through And Overlapping Action
These represent two distinct but related principles for capturing realism. “Follow through” has to do with inertia, the concept that when a moving object stops moving, some parts continue to follow. When a woman in a running dress suddenly stopped, part of the dress continued to move forward thanks to the momentum.
“Superimposed motion” refers to how different parts of an object move at different speeds. When walking, the left and right sides do their own thing, rarely are they perfectly in sync.
These two concepts should also be considered for abstract objects. Slightly expands like this, where you can add “a little extra” to it, making your animations look unnatural and robotic.
6. Slow In and Slow Out
This represents the technical side of animation. You can slow down the motion of your animation by adding more frames, and vice versa. So when an object accelerates and decelerates, add more frames, and during the middle of an action, use less frames. Doing so will make the action seems to ramp up and then down.
7. Arc
Animating motion on arc trajectories will create a more natural motion. Most objects in reality tend to move in arcs. Think of Da Vinci’s Vitruvian Man.
The good news is that some animation software lets you set your own line of motion, so with the right tools you can easily apply this principle.
8. Secondary Action
This principle is a bit more complicated than the others because it has to be balanced. The idea is that when one part of an object moves, the other usually moves too. Do not keep your head and eyes straight while walking on the street. You look around, nod your head, and blink. These secondary motions can make the animation look more lively, but still subtle so as not to distract from the main movement.
9. Timing
Adding frames to the animation will slow it down, and removing it will speed it up. Take into account the timing or real objects and adjust the speed of the animation accordingly.
10. Exaggeration
Even the most realistic animations are still a fantasy. Animation allows artists to exaggerate real life for effect. The example of this principle is our beloved Tom and Jerry cartoon.
11. Solid Drawing
Solid drawing means accounting a three-dimensional space.
In particular, The Illusion of Life warns against creating characters that have the same left and right sides. Such oversight can eliminate immersion.
12. Appeal
Make the subject of animation interesting and worth seeing. It could be something basic like bright colors, or something more creative like wide Anime eyes. The point is, nobody wants to see a monotonous animation.
Bringing Design to Life
All in all, animation is an involved process. It’s quite difficult to draw one well-crafted image, let alone thousands of images. That’s why animation is a lifelong discipline that an artist takes on the weekends.
But it’s a discipline worth the effort. Animation is a truly magical art form that not only has real advantages for business and design but can also elevate mundane projects to a level of imagination.
How should you get started on animation?
Now, that you have been enchanted by the magic of animation, how you could imagine a life with only still images?
Give animation a chance and you will wonder how can you live this far without animations. Get started with Superpixel to be your next partner in crime animations!
