{"id":1382,"date":"2025-03-03T13:55:39","date_gmt":"2025-03-03T13:55:39","guid":{"rendered":"https:\/\/sites.wsagames.com\/rl5g23\/?p=1382"},"modified":"2025-03-04T13:57:01","modified_gmt":"2025-03-04T13:57:01","slug":"animation-principles","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/rl5g23\/2025\/03\/03\/animation-principles\/","title":{"rendered":"Animation principle"},"content":{"rendered":"\n<h6 class=\"wp-block-heading alignwide has-text-align-center has-medium-font-size\" style=\"font-style:normal;font-weight:200;text-transform:capitalize\">introduced by the Disney animators Ollie Johnston and Frank Thomas in book&nbsp;<em>The Illusion of Life: Disney Animation<\/em>&nbsp;published in 1981. These principles are the outcome of Disney animators\u2019 work from the 1930s onwards. created to help reflect real life and the basic laws of physics in animations, but also to resolve abstract issues like character appeal. The 12 principles of animation are perfect for both frame-by-frame animation and motion design.<\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-text-align-center has-primary-color has-text-color has-link-color has-small-font-size wp-elements-1\" style=\"text-transform:lowercase\"><a href=\"https:\/\/www.netguru.com\/blog\/illustrators-eye-12-principles-of-animation\">https:\/\/www.netguru.com\/blog\/illustrators-eye-12-principles-of-animation<\/a><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Squash and stretch: This principle adds weight and realism to drawings by showing the weight and depth of an object.\u00a0<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;The squash and stretch rule is about giving a sense of weight and flexibility to drawn objects. It works on simple objects, like a bouncing ball, and complex compositions with human bodies.&#8221;\u00a0<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Anticipation: Preparation\/ windup before the actual movement helps make the animation seem more realistic.\u00a0<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;Anticipation is used to prepare the audience for an action and to make the action appear more realistic. It\u2019s about showing a small opposite, contrasting movement&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Staging:The staging shows the core idea of the animators so the audience gets an idea of the mood which is mostly shown by the lighting and using the camera to zoom in or position it at a certain angle of a character to stage the scene. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;Staging in animation is similar to staging in theatre and film. Its purpose is to direct the audience&#8217;s attention and make it clear what is of the greatest importance in a scene. This can be done in various ways, such as the use of light and shadow, or the angle and position of the character, or the weight and colors. The essence of this rule is to keep focus on what is most important to define the mood of a scene\/character. It\u2019s also about cameras &#8211; you can zoom on a face, or zoom out to stage the scene.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Straight-ahead action and pose-to-pose:This principle refers to the two-drawing process :Straight-ahead action:\u00a0 when animation one frame after another is best used for unpredictable movement of elements like fire\/water.Pose-to-pose: Drawing the key poses first and then the in-between frames, best used for movement and scenes that need more control. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;Straight Ahead Action creates a more dynamic illusion of movement and is better for creating realistic movements, but it makes it harder to maintain proportions and to create exact, precise poses along the way. Pose to Pose works better for dramatic, emotional, or even exaggerated scenes, where composition and relation to the surroundings are more important. These techniques can be mixed in one animation.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Follow through and overlapping action:The follow-through and overlapping action are essential to make your animation realistic by following the law of physics to make the actions of the character more believable. It ensures that your character doesn&#8217;t feel unnatural or stiff.Follow through: The loose parts tied to the character that continue moving even after the character has stopped moving.\u00a0 A related concept is drag where appendages start to move only when characters have started to move. Overlapping actions: This is the concept that different body parts move at different rates. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;<strong>Follow Through<\/strong>\u00a0means that loosely tied parts of a body should continue moving after the character has stopped. Also, these parts should keep moving beyond the point where the character stopped only to be subsequently &#8220;pulled back&#8221;.<strong>Overlapping Action<\/strong>\u00a0is the rule for animation of different body parts. They should move at different rates. In character animation, an arm will move on a different timing than the head.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6Slow in and slow out : How a character begins and ends their action, slowing their actions. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;The movement of objects in the real world needs time to accelerate and slow down. For this reason, more pictures should be drawn near the\u00a0<em>beginning<\/em>\u00a0and\u00a0<em>end<\/em>\u00a0of an action, creating a\u00a0<em>slow in<\/em>\u00a0and\u00a0<em>slow out<\/em>\u00a0effect. It helps to achieve more realistic movements&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Arc: Having arcs movements give life to the character as only a few real-life objects go straight up and down. Creating arc movements can give more realistic movements\u00a0<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;&#8230; Most natural action tends to follow an arc, and animation should reflect this rule for greater realism. This could have something in common with the weight of objects, but, whatever the reason is, most living organisms moving will follow some kind of arc&#8230;.Animations based on drawings with straight inbetweens can completely kill the essence of the movement.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Secondary action:Having another action other than the primary action heightens the realistic movement giving it more emotion and life however this shouldn\u2019t overtake the primary action but just help emphasise it.<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;Adding secondary actions to the main movement gives a scene more life and makes it look more natural. The important thing about secondary actions is that they should emphasize the main action.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Timing :Timing takes into account the frames and can determine how quickly an action is. A new drawing in every frame is called a drawing on 1\u2019s and is best for detailed drawing, drawing on 2\u2019s is more common and is better for faster actions and drawing for 3\u2019s is better for background movement and more generalised action.<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;The number of frames used in any movement determines the amount of time that action will take. Timing is about the speed of the action. On a physical level, correct timing makes objects look like they follow the laws of physics.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Exaggeration : Exaggerating movement may not be realistic but helps emphasise an action. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;This principle is an effect especially useful if you want to make your animation look more like a caricature of realism. The level of exaggeration depends on the effect the animator wants to achieve.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Solid drawing:Drawing scenes in three-dimensional spaces and giving weight, depth and balance.\u00a0<mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;The principle of solid drawing is about drawing single scenes in three-dimensional space and giving them volume and weight. The animator needs to be a skilled artist and has to understand how shapes, anatomy, weight, balance, light and shadow work.&#8221;<\/mark><\/h6>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-small-font-size\" style=\"text-transform:lowercase\">\ud83d\udfc6 Appeal : Characters that draw the audience to them, pleasing to the eye which draws in the audience. <mark style=\"background-color:#111\" class=\"has-inline-color has-primary-color\">&#8220;Appeal in a character is a very important part. It helps to define the mood and presence of a person&#8221;<\/mark><\/h6>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUc4fJtAcIXue89lSgml3WTbowDoaJuitLek9XwCiMGcrHRPpqji5kbtivS0js0-keujShGlnNNrbsoCKnhJd5Fy1IDYrjVtGkw__mBjsK7lk6vJjiXVjTIWKM94LnUntkOC7eQU8g=s2048?key=cImkN6caP2FTZ9BCfwYRkBmk\" alt=\"\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"The 12 Principles of Animation Explained \u2014 The Most Important Rules for Animating\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/tYc1yUt0IeA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h5 class=\"wp-block-heading alignwide has-text-align-center has-system-sans-serif-font-family\" style=\"font-style:normal;font-weight:300\"><strong>5 animation principles that helped me<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5fb07882 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ol class=\"wp-block-list\">\n<li style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\"> Squash and stretch<\/li>\n\n\n\n<li style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\">Timing<\/li>\n\n\n\n<li style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\">Straight-ahead action<\/li>\n\n\n\n<li style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\">Anticipation <\/li>\n\n\n\n<li style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\">Exaggeration<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"has-text-align-center has-primary-color has-text-color has-link-color wp-elements-2 wp-block-paragraph\"><strong>How did they help?<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Seeing examples of these principles helped me get a better idea of how animation works and how to make animation feel more realistic.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h6 class=\"wp-block-heading alignwide has-text-align-center\" style=\"font-style:normal;font-weight:500;text-transform:uppercase\">PRACTISING basic squash and stretch animation :&nbsp;<\/h6>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5fb07882 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5fb07882 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/slidesz\/AGV_vUdrBYch-_Br_N-nDx8DPqlFyd9f0e08L5yRr4udGBdq-S8RMZKzl73osCoaCvnjJxSJBDDXp5UTvwyNiCEsv4O375wil7wuz-JV8wb8rAY5eDDT7AwtQqUk9Bd32GMjghpU21KC=s2048?key=cImkN6caP2FTZ9BCfwYRkBmk\" alt=\"\" style=\"width:338px;height:auto\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">I decided to do some simple animations that included using some of the principles to get a better grasp of animating .Overall, this helped me get a better idea of how many frames and a better idea of doing animation.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">The squash and stretch principle shows an object&#8217;s weight and hardness. The bouncing ball illustration is usually used to show this principle; When the object hits the ground, it flattens before bouncing away, showing the ball&#8217;s flexibility and weight. Which is also frequently drawn beside the principle, &#8216;arc&#8217;, adding this increase it\u2019s roundness and make it more lifelike. I wanted to experiment with additional methods to use the principles that had helped me understand animation more fully.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>introduced by the Disney animators Ollie Johnston and Frank Thomas in book&nbsp;The Illusion of Life: Disney Animation&nbsp;published in 1981. These principles are the outcome of Disney animators\u2019 work from the 1930s onwards. created to help reflect real life and the basic laws of physics in animations, but also to resolve abstract issues like character appeal. [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1382","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/posts\/1382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/comments?post=1382"}],"version-history":[{"count":7,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/posts\/1382\/revisions"}],"predecessor-version":[{"id":1409,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/posts\/1382\/revisions\/1409"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/media?parent=1382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/categories?post=1382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/rl5g23\/wp-json\/wp\/v2\/tags?post=1382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}