{"id":137,"date":"2020-08-01T21:04:40","date_gmt":"2020-08-02T01:04:40","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-9-%e2%80%a2-animation-methods\/"},"modified":"2021-07-26T10:36:30","modified_gmt":"2021-07-26T14:36:30","slug":"tutorial-8-animation-methods","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-8-animation-methods\/","title":{"raw":"Tutorial 8 \u2022 Animation Methods","rendered":"Tutorial 8 \u2022 Animation Methods"},"content":{"raw":"
\r\n\r\nAnimation generally refers to movement of vector graphics. Objects that move have a great deal of impact and educational value, and vector graphics have small file sizes. User interaction and control can make animations that much more engaging.\r\n\r\nFour ways to add animations to web pages (and ePub eBooks) include (1) CSS, (2) CSS with JavaScript, (3) jQuery, and (4) an animation program.\r\n

Animation with CSS<\/h2>\r\n

\"Example<\/a><\/p>\r\nThe CSS @keyframes rule and animation-name style enable you to animate objects in web pages, however there is minimal user control. If you want to have a button start the animation (as in the example above) or otherwise have user control, you would have to use JavaScript to connect the button with the object. For CSS animation the object must have position: relative; or position: absolute;, then you can control the left and top coordinates, along with other styles like size (width, height), color, and opacity.\r\n\r\nThe @keyframes rule specifies major change points as \u201cfrom\u201d and \u201cto\u201d or as percentage points from 0% to 100%, accompanied by the styles applicable to each point.\r\n

.car {\r\n\r\n<\/span>animation-name: letsgo;\r\n\r\n<\/span>animation-duration: 3s;\r\n\r\n<\/span>animation-fill-mode: forwards;\r\n\r\n<\/span>animation-iteration-count: 1;\r\n\r\n<\/span>position: absolute;\r\n\r\n} @keyframes letsgo {\r\n\r\n<\/span>0% {left: 100px;}\r\n\r\n<\/span>100% {left: 700px;}\r\n\r\n}<\/pre>\r\n
Animation with JavaScript <\/strong><\/p>\r\n
In the example above, a \u201cGo!\u201d button can be added and used to start the animation using JavaScript.<\/p>\r\n\r\n
    \r\n \t
  1. For the car, set \u201canimation-play-state: paused;\u201d<\/li>\r\n \t
  2. Write a JavaScript function to select the ID, \u201ccar,\u201d and set the animation-play-state to \u2028\u201crunning\u201d (see below).<\/li>\r\n \t
  3. Add the function to the button: <button onClick=\"animateCar()\">Go!<\/button><\/li>\r\n<\/ol>\r\n
    <script>\r\n\r\n<\/span>\u2028function animateCar {document.getElementById(\"car\").style.animationPlayState=\"running\");\r\n\r\n<\/script>\r\n\r\n\r\n<\/pre>\r\n
    Animation with jQuery<\/strong><\/p>\r\n
    User interaction can also be implemented with jQuery, an opensource library of JavaScript functions that was started by a group of MIT computer scientists. To use jQuery you have to either download and import the jQuery library (jquery-3.3.1.min.js) and the jQuery user interface (UI, jquery-ui.js), or connect to both from Google\u2019s GoogleAPIs hosted site. jQuery uses the ID assigned to the button and the object to link the two.<\/p>\r\n\r\n
    $(function() {\r\n\r\n<\/span><\/span>$('start').click(function() {\r\n\r\n<\/span> <\/span><\/span>$('car').animate({left: '+=1200px'}, 1000);\r\n\r\n<\/span><\/span>});\r\n\r\n});<\/pre>\r\nIn this example, we are animating the left coordinate of the \"car\" class by adding 1200px to the current value, which moves it off the screen, and doing the animation in 1000 microsec., or 1 sec. The animation is triggered when the user clicks the button, class 'start.'\r\n
    Animation with Tumult Hype<\/h2>\r\nTumult Hype (www.tumult.com\/hype) is a vector-graphic animation program for MacOS similar to Adobe\u2019s Flash and Animate. Hype has an easy-to-use interface and simple procedure for placing an animation into a web page or iBook. The publisher offers a fully functional demo for 15 days.\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"768\"]\"image\" Screen capture of an animation in Tumult Hype. (Car from pngtree.com.)[\/caption]\r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    Components in Tumult Hype<\/th>\r\n<\/tr>\r\n
    Component<\/th>\r\nFunction<\/th>\r\n<\/tr>\r\n
    1 stage<\/strong><\/td>\r\ndocument or pasteboard for the animation<\/td>\r\n<\/tr>\r\n
    2 layers and properties<\/strong><\/td>\r\neach object goes on a separate layer and is affected by CSS properties in the list<\/td>\r\n<\/tr>\r\n
    3 timeline with playhead<\/strong><\/td>\r\ncontrols timing of the animation<\/td>\r\n<\/tr>\r\n
    4 keyframes<\/strong><\/td>\r\nmain points of change in the animation<\/td>\r\n<\/tr>\r\n
    5 tweens<\/strong><\/td>\r\ntransitions between keyframes<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    New Document<\/h3>\r\n
      \r\n \t
    1. Make a new document in Hype. Set the stage size to the width and height of the background image (864324px).<\/li>\r\n \t
    2. Drag-and-drop the background image onto the stage.<\/li>\r\n \t
    3. Drag-and-drop the car image onto the \u201croad,\u201d size appropriately, and place at the left edge of the scene.<\/li>\r\n \t
    4. With the Elements, draw a rectangle with coloured circles that will be made into buttons.<\/li>\r\n<\/ol>\r\n
      Animation<\/h3>\r\n
        \r\n \t
      1. The animation sequence in Hype is: timeline > keyframe > position. To animate the car, first select it. Put the Play Head at 00:00.00 sec. and place a Keyframe for the Origin (Left) Property at that point.<\/li>\r\n \t
      2. Move the timeline to 2 sec. (or the length of time you want the car to take to get off the screen) and place another Keyframe > Origin (Left) at that time.<\/li>\r\n \t
      3. Move the car to the right, off the stage.<\/li>\r\n \t
      4. Play the animation in Hype to see how it works.<\/li>\r\n<\/ol>\r\n
        Buttons<\/h3>\r\n
          \r\n \t
        1. To give users control over the animation, select the green circle that you drew. In the Actions Inspector at right (hand symbol), click on On Mouse Up (Touch End) > Action > Continue Timeline.<\/li>\r\n \t
        2. To keep the animation from starting by itself, bring the Play Head to the 00:00.00 position. Set Timeline Actions > Action > Pause Timeline.<\/li>\r\n \t
        3. To test your animation, click the Preview button, which will open it in the browser of your choice. Check that the button works and that the animation plays as expected.<\/li>\r\n<\/ol>\r\n
          Additional Steps<\/h3>\r\n
            \r\n \t
          1. To make the car turn around at the end of the animation, add a Keyframe for Rotation Angle (Y) and set to 180\u00b0.<\/li>\r\n \t
          2. Add another Timeline Action > Pause Keyframe to make the animation stop before the car turns around.<\/li>\r\n \t
          3. Add more seconds to the timeline to make the car drive back to the starting point and turn around again.<\/li>\r\n \t
          4. Program a second button to bring the car back.<\/li>\r\n<\/ol>\r\n
            Export Animation<\/h3>\r\nA Hype animation can be placed into into a web page by copying the indicated <div> tag and accompanying resources folder.\r\n\r\nThe animation can be placed into an Apple iBook by exporting to Apple Widget (.wdgt) format. Just drag-and-drop the .wdgt file into iBooks Author.\r\n\r\nThe animation can be placed into a fixed-layout ePub by exporting as Animated GIF, however this format offers no user control.\r\n
            <\/p>\r\n\r\n<\/div>","rendered":"
            \n
            Animation generally refers to movement of vector graphics. Objects that move have a great deal of impact and educational value, and vector graphics have small file sizes. User interaction and control can make animations that much more engaging.<\/p>\n
            Four ways to add animations to web pages (and ePub eBooks) include (1) CSS, (2) CSS with JavaScript, (3) jQuery, and (4) an animation program.<\/p>\n
            Animation with CSS<\/h2>\n
            \"Example<\/a><\/p>\n
            The CSS @keyframes rule and animation-name style enable you to animate objects in web pages, however there is minimal user control. If you want to have a button start the animation (as in the example above) or otherwise have user control, you would have to use JavaScript to connect the button with the object. For CSS animation the object must have position: relative; or position: absolute;, then you can control the left and top coordinates, along with other styles like size (width, height), color, and opacity.<\/p>\n
            The @keyframes rule specifies major change points as \u201cfrom\u201d and \u201cto\u201d or as percentage points from 0% to 100%, accompanied by the styles applicable to each point.<\/p>\n
            .car {\r\n\r\n<\/span>animation-name: letsgo;\r\n\r\n<\/span>animation-duration: 3s;\r\n\r\n<\/span>animation-fill-mode: forwards;\r\n\r\n<\/span>animation-iteration-count: 1;\r\n\r\n<\/span>position: absolute;\r\n\r\n} @keyframes letsgo {\r\n\r\n<\/span>0% {left: 100px;}\r\n\r\n<\/span>100% {left: 700px;}\r\n\r\n}<\/pre>\n
            Animation with JavaScript <\/strong><\/p>\n
            In the example above, a \u201cGo!\u201d button can be added and used to start the animation using JavaScript.<\/p>\n
              \n
            1. For the car, set \u201canimation-play-state: paused;\u201d<\/li>\n
            2. Write a JavaScript function to select the ID, \u201ccar,\u201d and set the animation-play-state to \u2028\u201crunning\u201d (see below).<\/li>\n
            3. Add the function to the button: <button onClick=”animateCar()”>Go!<\/button><\/li>\n<\/ol>\n
              <script>\r\n\r\n<\/span>\u2028function animateCar {document.getElementById(\"car\").style.animationPlayState=\"running\");\r\n\r\n<\/script>\r\n\r\n\r\n<\/pre>\n
              Animation with jQuery<\/strong><\/p>\n
              User interaction can also be implemented with jQuery, an opensource library of JavaScript functions that was started by a group of MIT computer scientists. To use jQuery you have to either download and import the jQuery library (jquery-3.3.1.min.js) and the jQuery user interface (UI, jquery-ui.js), or connect to both from Google\u2019s GoogleAPIs hosted site. jQuery uses the ID assigned to the button and the object to link the two.<\/p>\n
              $(function() {\r\n\r\n<\/span><\/span>$('start').click(function() {\r\n\r\n<\/span> <\/span><\/span>$('car').animate({left: '+=1200px'}, 1000);\r\n\r\n<\/span><\/span>});\r\n\r\n});<\/pre>\n
              In this example, we are animating the left coordinate of the “car” class by adding 1200px to the current value, which moves it off the screen, and doing the animation in 1000 microsec., or 1 sec. The animation is triggered when the user clicks the button, class ‘start.’<\/p>\n
              Animation with Tumult Hype<\/h2>\n
              Tumult Hype (www.tumult.com\/hype) is a vector-graphic animation program for MacOS similar to Adobe\u2019s Flash and Animate. Hype has an easy-to-use interface and simple procedure for placing an animation into a web page or iBook. The publisher offers a fully functional demo for 15 days.<\/p>\n
              \"image\"
              Screen capture of an animation in Tumult Hype. (Car from pngtree.com.)<\/figcaption><\/figure>\n
               <\/p>\n\n\n\n\n\n\n\n\n\n
              Components in Tumult Hype<\/th>\n<\/tr>\n
              Component<\/th>\nFunction<\/th>\n<\/tr>\n
              1 stage<\/strong><\/td>\ndocument or pasteboard for the animation<\/td>\n<\/tr>\n
              2 layers and properties<\/strong><\/td>\neach object goes on a separate layer and is affected by CSS properties in the list<\/td>\n<\/tr>\n
              3 timeline with playhead<\/strong><\/td>\ncontrols timing of the animation<\/td>\n<\/tr>\n
              4 keyframes<\/strong><\/td>\nmain points of change in the animation<\/td>\n<\/tr>\n
              5 tweens<\/strong><\/td>\ntransitions between keyframes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
              New Document<\/h3>\n
                \n
              1. Make a new document in Hype. Set the stage size to the width and height of the background image (864324px).<\/li>\n
              2. Drag-and-drop the background image onto the stage.<\/li>\n
              3. Drag-and-drop the car image onto the \u201croad,\u201d size appropriately, and place at the left edge of the scene.<\/li>\n
              4. With the Elements, draw a rectangle with coloured circles that will be made into buttons.<\/li>\n<\/ol>\n
                Animation<\/h3>\n
                  \n
                1. The animation sequence in Hype is: timeline > keyframe > position. To animate the car, first select it. Put the Play Head at 00:00.00 sec. and place a Keyframe for the Origin (Left) Property at that point.<\/li>\n
                2. Move the timeline to 2 sec. (or the length of time you want the car to take to get off the screen) and place another Keyframe > Origin (Left) at that time.<\/li>\n
                3. Move the car to the right, off the stage.<\/li>\n
                4. Play the animation in Hype to see how it works.<\/li>\n<\/ol>\n
                  Buttons<\/h3>\n
                    \n
                  1. To give users control over the animation, select the green circle that you drew. In the Actions Inspector at right (hand symbol), click on On Mouse Up (Touch End) > Action > Continue Timeline.<\/li>\n
                  2. To keep the animation from starting by itself, bring the Play Head to the 00:00.00 position. Set Timeline Actions > Action > Pause Timeline.<\/li>\n
                  3. To test your animation, click the Preview button, which will open it in the browser of your choice. Check that the button works and that the animation plays as expected.<\/li>\n<\/ol>\n
                    Additional Steps<\/h3>\n
                      \n
                    1. To make the car turn around at the end of the animation, add a Keyframe for Rotation Angle (Y) and set to 180\u00b0.<\/li>\n
                    2. Add another Timeline Action > Pause Keyframe to make the animation stop before the car turns around.<\/li>\n
                    3. Add more seconds to the timeline to make the car drive back to the starting point and turn around again.<\/li>\n
                    4. Program a second button to bring the car back.<\/li>\n<\/ol>\n
                      Export Animation<\/h3>\n
                      A Hype animation can be placed into into a web page by copying the indicated <div> tag and accompanying resources folder.<\/p>\n
                      The animation can be placed into an Apple iBook by exporting to Apple Widget (.wdgt) format. Just drag-and-drop the .wdgt file into iBooks Author.<\/p>\n
                      The animation can be placed into a fixed-layout ePub by exporting as Animated GIF, however this format offers no user control.<\/p>\n
                      \n<\/div>\n","protected":false},"author":6,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-137","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":10,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/137\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/137\/revisions\/407"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/137\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapter-type?post=137"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/contributor?post=137"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/license?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}