{"id":1350,"date":"2017-09-01T11:46:26","date_gmt":"2017-09-01T06:16:26","guid":{"rendered":"http:\/\/imagic.net.in\/?p=1350"},"modified":"2018-03-10T17:30:41","modified_gmt":"2018-03-10T12:00:41","slug":"12-laws-animation","status":"publish","type":"post","link":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/","title":{"rendered":"The 12 Laws of Animation"},"content":{"rendered":"

The 12 Laws of Animation\u00a0<\/strong><\/p>\n

Much like the laws of physics in the real world, the \u201c12 Laws\u201d or 12 basic principles of animation are a set of rules to adhere by for consistent and beautiful animation. First outlined by Ollie Johnston, the directing animator of Pinocchio<\/em>, and Frank Thomas of Snow White and the Seven Dwarves<\/em> fame, animation studios the world over look back to these tenants from the golden age of cartoons. In their book Disney Animation: The Illusion of Life <\/em>these animation greats lay out the 12 basic principles that ensured the Disney movies from the 1930s onward would be remembered as classics for years to come.<\/p>\n

Though the 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today, and are important for any animator to learn, in and out. Mastery of the 12 basic principles of animation is the first step to getting hired at big name animation studios, and animations that exhibit tight control over these elements are widely regarded as some of the best pieces of animation ever created.<\/p>\n

    \n
  1. Squash and Stretch<\/strong><\/li>\n<\/ol>\n

    The first and most important of the 12 laws is used to give drawn objects a feeling of flexibility and weight. Squashing and stretching are the two most basic animated reactions a drawn object can exhibit and they applied to everything from a simple bouncing ball to the intricate and photorealistic animations of the human body? Squash and Stretch are often manipulated to create a cartoonish comedic effect but are utilized in all types of animation.\u00a0 In more realistic animations, squash and stretch are linked, meaning that if an object is stretched vertically, it\u2019s squashed horizontally.<\/p>\n

      \n
    1. Anticipation<\/strong><\/li>\n<\/ol>\n

      In 2D animation, the anticipation of a movement is just as important as the movement itself. The moment of anticipation informs the audience that an object or character is about to take action and directs their attention appropriately. Much like squash and stretch apply to object, anticipation applies to movements, giving them a sense of authenticity. A boy kicking a ball must first wind up his kick, creating a moment of anticipation for the kick and implying a cause for the next action. Some gags omit anticipation altogether for an anticlimactic comedic effect, but there are few other reasons not to express anticipation.<\/p>\n

        \n
      1. Staging\u00a0<\/strong><\/li>\n<\/ol>\n

        Just like in theater, staging is the layout of objects and characters in a scene that draw the audience\u2019s attention to the subject of the scene. A proper use of staging will make the audience absolutely certain what is going on in a given scene. Wide, medium and close up shots, camera angles, colors, and the amount of movement should all be taken into consideration when contemplating the staging of a scene. Too much motion makes a scene look cluttered, but a wider camera shot can alleviate that issue without much hassle.<\/p>\n

        Hayao Miyazaki, one of the most prolific and influential animators of our time, is said to be a master of staging, his films often incorporating vast and expansive settings that give his movies the grand sense of adventure that makes them so notorious.<\/p>\n

          \n
        1. Straight Ahead and Pose-to-Pose<\/strong><\/li>\n<\/ol>\n

          Straight Ahead and Pose-to-Pose are two different approaches to animation that yield two different results. Straight Ahead or \u201cframe-by-frame\u201d animation is a continuous process in which the animator draws each scene a single frame at a time. Straight Ahead animation gets its name from the fact that the animation is moving straight ahead from the first drawing in the scene. Employed mostly by cartoonists, the Straight Ahead style yields a wild and engaging animation with a fresh and spontaneous feel, but is less precise, which often leads to the warping of a character volume or proportions.<\/p>\n

          Pose to pose animation is a far more controlled method of animation in which the animator plans out the key poses in the scene. Typically referred to as \u201ckeyframes\u201d these poses are drawn by the animator and then, with the help of an assistant or animation software, fills in the frames between each keyframe.<\/p>\n

          The resulting animation is usually much more consistent than Straight Ahead animation and proportions tend to stay uniform instead of jumping around.<\/p>\n

          Many animators are known to combine both styles of animation in certain scenes, using Pose-to-Pose style techniques to give the movements texture, while still incorporating all the fun spontaneity of Straight Ahead animation.<\/p>\n

            \n
          1. Follow Through and Overlapping Action<\/strong><\/li>\n<\/ol>\n

            The next principle pertains to drawn objects that are in motion. Follow through is the time it takes for the extraneous parts of a character (such as arms, hair, coat, tail, etc.) to stop after the main mass of the character. As in real life, in animation nothing should stop all at once, so when the leading mass of an object comes to a halt, any connected or trailing parts of it should offer a sufficient wind down time.<\/p>\n

            Overlapping action comes in to play when the main mass of an object in motion changes directions while the extraneous parts of the object take time to adjust to the new direction. A character with long hair should have his hair billow when he turns around, instead of just turning with the head entirely. Overlapping action is used heavily in Disney\u2019s television cartoons to set up comedic gags and express exaggerated motion.<\/p>\n

              \n
            1. Slow-Out and Slow-In<\/strong><\/li>\n<\/ol>\n

              The smoothness of an animation is governed mostly by how many frames the animation contains. More frames means smoother, slower animation, fewer frames will speed up the animation. Slow-Ins and Slow-Outs make use of this relationship by adding more frames at the beginning or end of an action respectively.<\/p>\n

              An object that is beginning motion will have a Slow-In\u00a0 to show the finer movements of the object as it accelerates, and a Slow-Out to wind the action down smoothly. Omitting a Slow-In or Slow-Out will typically make the scene feel more snappy and less flowing, but can be used to great effect in some comedic gags.<\/p>\n

                \n
              1. Arcs<\/strong><\/li>\n<\/ol>\n

                Natural movement tends to follow the basic trajectory of an arc, as such, it is important for animators to consider implied \u201carcs\u201d for each movement. The faster an object is moving, the more subtle it\u2019s arc, making the proper use of arcs absolutely imperative for expressing speed. Thrown objects, limbs, and even free moving characters follow what is called a \u201cnatural arc\u201d for the scene, which is determined by the staging and perspective of the scene. If an object breaks it\u2019s natural arc the movement will seem out of place or erratic, which can be used to set up a comedic element.<\/p>\n

                  \n
                1. Secondary Action<\/strong><\/li>\n<\/ol>\n

                  The addition of secondary action can make a scene more interesting to the viewer and further help enforce the illusion of reality. Instead of simply walking, a character can bend its knees, swing its arms or nod it\u2019s head. Typically used to convey strong emotions, secondary action is an integral part of creating engaging animations that are more than just one moving part.<\/p>\n

                    \n
                  1. Timing\u00a0<\/strong><\/li>\n<\/ol>\n

                    Timing, or the number of frames in a given scene or action, dictates the overall speed of the animation. Having the right amount of frames in an action is integral to creating a scene that looks like everything is happening at the same time. The timing of on screen movements also affects how real the movements seem, whether or not they obey the laws of physics, and how detailed each movement actually is.<\/p>\n

                      \n
                    1. Exaggeration<\/strong><\/li>\n<\/ol>\n

                      Arguably the most common way of making a scene interesting is exaggerating one aspect of it over another. Cartoons use exaggeration as a way of suspending the reality of the animation. Whether or not exaggeration should be used as well as how heavily it is used depends on the style the animator is looking to achieve. Judicious use of exaggeration can help animators achieve any number of different themes and styles, from dramatic tension to just plain funny gags.<\/p>\n

                        \n
                      1. Solid Drawing<\/strong><\/li>\n<\/ol>\n

                        Solid drawing is a principle that applies to objects drawn in three a three dimensional space. Animation that takes place on a 2D plane is often insufficient to realize the full motion of an action. An animator that is also skilled in drafting will be able to use solid drawing techniques to give their drawn objects three dimensional aspects like weight, balance, anatomy, lighting and more.<\/p>\n

                          \n
                        1. Appeal\u00a0<\/strong><\/li>\n<\/ol>\n

                          Appeal is to an animated character as charisma is to a real life actor. Audiences will have a hard time sympathizing with an unappealing character. There are a few tricks to designing appealing characters, for example the Chibi style of drawing capitalizes on big heads with expressive faces and cute small bodies.<\/p>\n

                          The most appealing characters tend to become favorites of the audience and make them care about what happens to the character, however, just because a character is an antagonist or seen as \u201cevil\u201d doesn\u2019t necessarily mean that the character is unappealing. Animators strive to make the leading characters in any project as appealing as possible to captivate the audience<\/p>\n

                          Want to learn 2D Animation Click Here.<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

                          The 12 Laws of Animation\u00a0 Much like the laws of physics in the real world, the \u201c12 Laws\u201d or 12 basic principles of animation are a set of rules to adhere by for consistent and beautiful animation. First outlined by Ollie Johnston, the directing animator of Pinocchio, and Frank Thomas of Snow White and the … Continue reading The 12 Laws of Animation<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":1004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"yoast_head":"\nThe 12 Laws of Animation | basic principles of animation<\/title>\n<meta name=\"description\" content=\"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The 12 Laws of Animation | basic principles of animation\" \/>\n<meta property=\"og:description\" content=\"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"IMAGIC LEARNING SOLUTIONS PRIVATE LIMITED\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/imagicinstitute\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-01T06:16:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-10T12:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"370\" \/>\n\t<meta property=\"og:image:height\" content=\"205\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Imagic Institute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Imagicinstitute\" \/>\n<meta name=\"twitter:site\" content=\"@Imagicinstitute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Imagic Institute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/\",\"url\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/\",\"name\":\"The 12 Laws of Animation | basic principles of animation\",\"isPartOf\":{\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg\",\"datePublished\":\"2017-09-01T06:16:26+00:00\",\"dateModified\":\"2018-03-10T12:00:41+00:00\",\"author\":{\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/e1361bb294063fdba3c977a63912c043\"},\"description\":\"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today\",\"breadcrumb\":{\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage\",\"url\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg\",\"contentUrl\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg\",\"width\":370,\"height\":205,\"caption\":\"The 12 Laws of 2D Animation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The 12 Laws of Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/#website\",\"url\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/\",\"name\":\"IMAGIC LEARNING SOLUTIONS PRIVATE LIMITED\",\"description\":\"Multimedia and Animation Course training in Kolkata\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/e1361bb294063fdba3c977a63912c043\",\"name\":\"Imagic Institute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/67672ad3dab42af7dd7ef689dfa70dade12aec612c61e87f8bfa4b5b90d0a207?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/67672ad3dab42af7dd7ef689dfa70dade12aec612c61e87f8bfa4b5b90d0a207?s=96&r=g\",\"caption\":\"Imagic Institute\"},\"description\":\"Best Graphics design training course in Kolkata and Siliguri offered by IMAGIC with 100% placement record;This 5 months Diploma Course in Graphics Designing...\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The 12 Laws of Animation | basic principles of animation","description":"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"The 12 Laws of Animation | basic principles of animation","og_description":"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today","og_url":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/","og_site_name":"IMAGIC LEARNING SOLUTIONS PRIVATE LIMITED","article_publisher":"https:\/\/www.facebook.com\/imagicinstitute","article_published_time":"2017-09-01T06:16:26+00:00","article_modified_time":"2018-03-10T12:00:41+00:00","og_image":[{"width":370,"height":205,"url":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg","type":"image\/jpeg"}],"author":"Imagic Institute","twitter_card":"summary_large_image","twitter_creator":"@Imagicinstitute","twitter_site":"@Imagicinstitute","twitter_misc":{"Written by":"Imagic Institute","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/","url":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/","name":"The 12 Laws of Animation | basic principles of animation","isPartOf":{"@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage"},"image":{"@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg","datePublished":"2017-09-01T06:16:26+00:00","dateModified":"2018-03-10T12:00:41+00:00","author":{"@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/e1361bb294063fdba3c977a63912c043"},"description":"The 12 laws of animation or basic principles of animation. The 12 basic principles were originally intended for the hand-drawn animation style of the time, they still apply to the computer animation standards of today","breadcrumb":{"@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#primaryimage","url":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg","contentUrl":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-content\/uploads\/2017\/03\/370-2053.jpg","width":370,"height":205,"caption":"The 12 Laws of 2D Animation"},{"@type":"BreadcrumbList","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/12-laws-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pinealmagic.in\/imagic-net-in-old\/"},{"@type":"ListItem","position":2,"name":"The 12 Laws of Animation"}]},{"@type":"WebSite","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/#website","url":"https:\/\/pinealmagic.in\/imagic-net-in-old\/","name":"IMAGIC LEARNING SOLUTIONS PRIVATE LIMITED","description":"Multimedia and Animation Course training in Kolkata","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pinealmagic.in\/imagic-net-in-old\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/e1361bb294063fdba3c977a63912c043","name":"Imagic Institute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pinealmagic.in\/imagic-net-in-old\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/67672ad3dab42af7dd7ef689dfa70dade12aec612c61e87f8bfa4b5b90d0a207?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/67672ad3dab42af7dd7ef689dfa70dade12aec612c61e87f8bfa4b5b90d0a207?s=96&r=g","caption":"Imagic Institute"},"description":"Best Graphics design training course in Kolkata and Siliguri offered by IMAGIC with 100% placement record;This 5 months Diploma Course in Graphics Designing..."}]}},"_links":{"self":[{"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/posts\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":0,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/media\/1004"}],"wp:attachment":[{"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pinealmagic.in\/imagic-net-in-old\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}