Animation

Definition
• Animation is a method by which still figures are manipulated to appear
as moving images. In traditional animation, images are drawn or painted by
hand on transparent celluloid sheets to be photographed and exhibited on film.
Today, many animations are made with computer-generated
imagery (CGI). Computer animation can be very detailed 3D animation, while
2D computer animation (which may have the look of traditional animation)
can be used for stylistic reasons, low bandwidth, or faster real-time renderings.
Other common animation methods apply a stop motion technique to two- and
three-dimensional objects like paper cutouts, puppets, or clay figures.
 Principle of Animations.
There are 12 major principles for an effective and easy to communicate animation . 
 1. Squash and Stretch:
This principle works over the physical properties that are expected to change
in any process. Ensuring proper squash and stretch makes our animation
more convincing. For Example: When we drop a ball from height, there is a
change in its physical property. When the ball touches the surface, it bends
slightly which should be depicted in animation properly. 
 2.Anticipation: 

Anticipation is used to prepare the audience for an action, and to make the
action appear more realistic. A dancer jumping off the floor has to bend the
knees first; a golfer making a swing has to swing the club back first. The
technique can also be used for less physical actions, such as a character
looking off-screen to anticipate someone's arrival, or attention focusing on
an object that a character is about to pick up
 3. Staging

• This principle is akin to staging, as it is known in theatre and film. Its

purpose is to direct the audience's attention, and make it clear what is of
greatest importance in a scene; Johnston and Thomas defined it as "the
presentation of any idea so that it is completely and unmistakably clear",
whether that idea is an action, a personality, an expression, or a mood.This
can be done by various means, such as the placement of a character in the
frame, the use of light and shadow, or the angle and position of the
camera.The essence of this principle is keeping focus on what is relevant,
and avoiding unnecessary detail.
 4. Straight ahead action and pose to pose

• These are two different approaches to the drawing process. Straight ahead

action scenes are animated frame by frame from beginning to end, while
"pose to pose" involves starting with drawing key frames, and then filling in
the intervals later."Straight ahead action" creates a more fluid, dynamic
illusion of movement, and is better for producing realistic action sequences.
On the other hand, it is hard to maintain proportions and to create exact,
convincing poses along the way. "Pose to pose" works better for dramatic or
emotional scenes, where composition and relation to the surroundings are of
greater importance. A combination of the two techniques is often used.
 5.In computer animation
• Computer animation removes the problems of proportion related to
"straight ahead action" drawing; however, "pose to pose" is still used for
computer animation, because of the advantages it brings in
composition. The use of computers facilitates this method and can fill in
the missing sequences in between poses automatically. It is still important
to oversee this process and apply the other principles
 6.Follow through and overlapping action

• Follow through and overlapping action is a general heading for two closely related techniques which help to render movement more

realistically, and help to give the impression that characters follow the laws of physics, including the principle of inertia. "Follow

through" means that loosely tied parts of a body should continue moving after the character has stopped and the parts should keep

moving beyond the point where the character stopped only to be subsequently "pulled back" towards the center of mass or exhibiting

various degrees of oscillation damping. "Overlapping action" is the tendency for parts of the body to move at different rates (an arm will

move on different timing of the head and so on). A third, related technique is "drag", where a character starts to move and parts of them

take a few frames to catch up.These parts can be inanimate objects like clothing or the antenna on a car, or parts of the body, such as

arms or hair. On the human body, the torso is the core, with arms, legs, head and hair appendices that normally follow the torso's

movement. Body parts with much tissue, such as large stomachs and breasts, or the loose skin on a dog, are more prone to independent

movement than bonier body parts. Again, exaggerated use of the technique can produce a comical effect, while more realistic animation

must time the actions exactly, to produce a convincing result.The "moving hold" animates between two very similar positions; even

characters sitting still, or hardly moving, can display some sort of movement, such as breathing, or very slightly changing position. This

prevents the drawing from becoming "dead".

 7. Slow in and slow out

• The movement of objects in the real world, such as the human body,
animals, vehicles, etc. needs time to accelerate and slow down. For this
reason, more pictures are drawn near the beginning and end of an action,
creating a slow in and slow out effect in order to achieve more realistic
movements. This concept emphasizes the object's extreme poses. Inversely,
fewer pictures are drawn within the middle of the animation to emphasize
faster action. This principle applies to characters moving between two
extreme poses, such as sitting down and standing up, but also for inanimate,
moving objects, like the bouncing ball in the above illustration
 8. Arc

• Most natural action tends to follow an arched trajectory, and animation should adhere to this
principle by following implied "arcs" for greater realism. This technique can be applied to a
moving limb by rotating a joint, or a thrown object moving along a parabolic trajectory. The
exception is mechanical movement, which typically moves in straight lines.
• As an object's speed or momentum increases, arcs tend to flatten out in moving ahead and
broaden in turns. In baseball, a fastball would tend to move in a straighter line than other
pitches; while a figure skater moving at top speed would be unable to turn as sharply as a
slower skater, and would need to cover more ground to complete the turn.
• An object in motion that moves out of its natural arc for no apparent reason will appear
erratic rather than fluid. For example, when animating a pointing finger, the animator should
be certain that in all drawings in between the two extreme poses, the fingertip follows a
logical arc from one extreme to the next. Traditional animators tend to draw the arc in lightly
on the paper for reference, to be erased later.
 9.Secondary action

• Adding secondary actions to the main action gives a scene more life, and can
help to support the main action. A person walking can simultaneously swing
their arms or keep them in their pockets, speak or whistle, or express emotions
through facial expressions. The important thing about secondary actions is that
they emphasize, rather than take attention away from the main action. If the
latter is the case, those actions are better left out. For example, during a
dramatic movement, facial expressions will often go unnoticed. In these cases,
it is better to include them at the beginning and the end of the movement, rather
than during
 10.Timing

• Timing refers to the number of drawings or frames for a given action,

which translates to the speed of the action on film.On a purely physical
level, correct timing makes objects appear to obey the laws of physics. For
instance, an object's weight determines how it reacts to an impetus, like a
push: a lightweight object will react faster than a heavy one.Timing is
critical for establishing a character's mood, emotion, and reaction. It can
also be a device to communicate aspects of a character's personality.
 11.Exaggeration

• Exaggeration is an effect especially useful for animation, as animated motions

that strive for a perfect imitation of reality can look static and dull.The level of
exaggeration depends on whether one seeks realism or a particular style, like a
caricature or the style of a specific artist. The classical definition of
exaggeration, employed by Disney, was to remain true to reality, just
presenting it in a wilder, more extreme form. Other forms of exaggeration can
involve the supernatural or surreal, alterations in the physical features of a
character; or elements in the storyline itself. It is important to employ a certain
level of restraint when using exaggeration. If a scene contains several
elements, there should be a balance in how those elements are exaggerated in
relation to each other, to avoid confusing or overawing the viewer
 12.Solid drawing

• The principle of solid drawing means taking into account

forms in three-dimensional space, or giving them volume
and weight. The animator needs to be a skilled artist and
has to understand the basics of three-dimensional shapes,
anatomy, weight, balance, light and shadow, etc. For the
classical animator, this involved taking art classes and
doing sketches from life. One thing in particular that
Johnston and Thomas warned against was creating
"twins": characters whose left and right sides mirrored
each other, and looked lifeless.[
 13.Appeal

• Appeal in a cartoon character corresponds to what would be

called charisma in an actor. A character who is appealing is
not necessarily sympathetic; villains or monsters can also be
appealing. The important thing is that the viewer feels the
character is real and interesting. There are several tricks for
making a character connect better with the audience; for
likable characters, a symmetrical or particularly baby-like
face tends to be effective. A complicated or hard to read face
will lack appeal or 'captivation' in the composition of the
pose or character design.
 3D Effect

• By giving 3D effects we can make our animation more convincing and

effective. In 3D Effect, we convert our object in a 3-dimensional plane
i.e., X-Y-Z plane which improves the realism of the object. For Example,
a square can give a 2D effect but cube can give a 3D effect which appears
more realistic. 
 Animation Techniques

• animation is popular among kids and can also see traces of animation in
some educational videos as well. Nowadays by animation, the animator
creates such type of visualization which are not played in reality, also we
can create those scenes which are beyond thinking.
• it is important to discuss some techniques which were used by the people

when animation word was created and till now some techniques also built by

which anyone can animate and creates its own animation. People can also

practice there thinking limitations on this platform because if they do so they

know their inner skills as well.

• Now some of the important techniques which evolved from past till now

discuss below:
 Traditional Animation or Classical 2D
Animation
• In this animation, every picture for a scene is created by hand if anyone
loves to paint then traditional animation is very interesting for those
people. In this animation, an individual draw painting in a sheet or paper
and also the pictures that create a scene will be created by the hand and
frame them together to create a proper scene.
 Digital 2D Animation

• This animation technique is widely used in the market to form a better

animation with digital technologies. It does not include to draw the
painting by hand but we can draw them by computer also and arrange
those pictures in a fixed manner and play them to create a proper scene.
 Digital 3D Animation

•  If anyone is interested in making an unreal character in the real-world

than this animation technique is awesome to work with. 3D animation is
very popular in the animation industry from this technique anyone can
create any type of unreal short film to an unreal film in a real way. Those
models which are created by this technique is highly realistic
 Puppetry Animation
• Animation is created using puppets instead of objects. Indian traditional
‘KATPUTLI’ is basically a better example of this animation in 90s
puppets are used in many small towns to organize a short pictures and
scenes to entertain the audiences. Those puppets are hung with thread and
those threads were controlled by any person who played these characters
and creates a film or scene. Also in the circus, we can find these animation
technique.
 Clay Animation or claymation
• If anyone is interested in clay art than this technique of creating animation
is better for those. In this animation, a clay structure is formed and these
clay arts are used to create an animation. There are also many types of
clay art such as oil clay art, dry clay art, etc.
 Cut-Out Animation
• Cut-out animation is one of the oldest animations of all time and this was
the initial form of animation which was evolved in the industry of
animation. The first cut-out animation was created by LotteReiniger in
1926 and it was named “The Adventures of Prince Achmed”
 Sand Animation
• This animation is used by those who loved to play with sand this was very
laughable but it is true because this technique is used among those who do
not irritate with sand. This technique is a little bit tough for beginners but
as we familiar with this technique than we love to create those pictures by
own. As we see in realities show like ‘Indias Got Talent’ various sand
animation artists will come and perform there.   
 Paint on glass Animation
• This animation is somewhat typical to create because the painting will be
created on glass and as we know anything or liquid can not settle on glass
but after this technique, the painting created will be so soothing and fresh
because of its surface(i.e., glass). Slow drying paints are used on glass and
in place of glass some times turpentine is also used by the animators.
 Eraser Animation
• As the name suggests, the sketches which are created by this technique is
full black and white because the pictures are created through pencils and
these sketches can be erased as well. Many popular charcoal eraser films
have been created using this technique and one famous animator is
William Kentridge.
 Pinscreen Animation
• Alexandre Alexeieff and Claire Parker invented the pinscreen animation
technique in the 1930s. The pictures will create through many pins that are
pinned on a plan with vertical alignment. Pinscreen animation makes use
of a screen filled with movable pins, which can be moved in or out by
pressing an object onto the screen.
 Flipflop Animation
• When computers are not introduced to people there would some parts
where animation is applicable. Painters and artists carry a small diary that
is filled with some similar sketches and when the diary flipped up it
creates some movement which is known as flip flop animation. Flipbook
animation is one of the oldest but fascinating kinds of animation.
 DIFFERENT TYPES OF ANIMATION FORMATS

• PNG or Portable Network Graphic was created two decades ago to support image files.
In the early 2000s, PNG started to support animation. PNG files have high bit depths,
and allow 1, 2, 4, 8, 16, 24 and 32-bit images. A license for PNG is free and open stand
as it was developed and it is still supported by World Wide Web Consortium. PNG
files allow full alpha channel transparency, which makes it possible to change the
background. Moreover, due to built-in gamma correction, a user can see a PNG file the
way it was intended to be seen by choosing the gamma level for the monitor.
• At the same time, PNG format is not good for large images as the large size will affect
the load speed of the page. Also, not all web browsers can support PNG format.
 JPG
• JPG stands for Joint Photographic Experts Group. And this is the best
format for photos of high quality. JPG file is the most used graphic format
in the world. When dropping the size of a JPG file, the quality of an image
is not lost. That is why this format is often used in the design and the
photography industry.
• JPG files do not support transparency. It is also not the best format for
logos and icons as it can create a bigger file size for small resolution
images.
 GIF

• GIF stands for Graphics Interchange Format. It was created in 1989, and
back then it was the first format for animations. GIF is suitable for logos
and icons with few colors. GIFs support transparency and are suitable for
tiny animations.
• The main disadvantage of this format is a big size file, that is usually
bigger than an SVG, a PNG or a JPEG one.
 SVG Animation

• SVG animation is an open 2D XML-based standard vector graphic. This type

of animation has become very popular worldwide, and various companies and
businesses have been slowly integrating this into their websites.
• SVG animation or Scalable Vector Graphics Animation was first launched in
1999 by the World Wide Web Consortium and developers of Synchronized
Multimedia Integration Language. In 2001 SVG animation became a
recommendation from W3C. During the 2000s and also at the beginning of
2010s many web browsers started to support and integrate SVG animations.
 Advantages of SVG Animation

• Fast Page Load

There is no need for an HTTP request to load an SVG animation. This
allows your web page with an animation to get loaded faster. The faster your
page loads, the better SEO ranking you can get. The User Experience (UX)
of the page with an SVG animation also looks better than without it. Icons
have been often used in interfaces as they are “universal” pictographic
representations of computer functionality and processing.
 Text-based Format

• SVG is a text-based format that can be created in HTML or in CSS. The

text you include in the code is indexed by search engines. That means
potentially you can improve your SEO rankings with this animation.
 Scalability

• Being a text-based format, an SVG image does not depend on a resolution

at all. Moreover, you can see an SVG animation from any device. And the
quality of an image will be the same. You can use an SVG animated image
in different sizes within the same website. There is no need to create many
copies of the same image that comes in different sizes. When using any
other format such as PNG, you will have to create many copies of the
same image.
 Small Size and Quality 

• The size of your SVG-animated file is defined by colors, layers, effects,

gradients and other elements it has in the code. Any SVG-animated file
can easily be compressed without losing its 
 Easy Changes

If you ever need to make any changes in an SVG-animated image, you can
do it fast and easy. All you need to do is to change the properties of an image
in the code itself such as background, transparency, borders or any others.
 Conclusion

• Depending on the purpose that you have, different types of animation

formats can be used. SVG animation has become quite popular due to
such properties as fast page load, text-based format, its scalability, small
sizes and high quality together with easy changes, that can be made
anytime.