{"id":824,"date":"2016-06-20T18:10:45","date_gmt":"2016-06-20T23:10:45","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=824"},"modified":"2017-02-03T14:49:15","modified_gmt":"2017-02-03T19:49:15","slug":"reproducing-a-clever-animation-product-part-12","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/06\/20\/reproducing-a-clever-animation-product-part-12\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 12"},"content":{"rendered":"<p>If we have the full animation state specified for every animation step then one of the easiest things we can do is to change the speed of the animation by changing the increment, which is shown below.  <\/p>\n<p>Clicking on any of the speed buttons sets the animation increment by calling the <code>setSpeed(speed)<\/code> function at the bottom of the listing.  Note that the current direction of animation, forwards or backwards, has to be preserved as well.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      var animationStep = 0;\r\n      \r\n      function doSomeStuffSetStep(step) {\r\n        var numstep = Number(step);\r\n        animationStep = numstep;\r\n        doSomeStuff(numstep);\r\n      }\r\n      \r\n      doSomeStuff(animationStep);         \/\/0\r\n      bcInitializeSlider(animationStep);  \/\/0\r\n      var animationIncrement = 1;         \/\/speed = 1\r\n\r\n      var requestId;\r\n      function animateSomeStuff() {\r\n        if ((animationStep >= 0) && (animationStep <= bcFinalActivity)) {\r\n          doSomeStuff(animationStep);\r\n          bcUpdateSlider(animationStep);\r\n        }\r\n        if ((animationStep < 0) || (animationStep > bcFinalActivity)) {\r\n          if (animationStep > bcFinalActivity) {\r\n            animationStep = bcFinalActivity;\r\n          } else if (animationStep < 0) {\r\n            animationStep = 0;\r\n          }\r\n          doSomeStuff(animationStep);\r\n          bcUpdateSlider(animationStep);\r\n          cancelAnimationFrame(requestID);\r\n        } else {\r\n          animationStep += animationIncrement;\r\n        } \r\n        requestId = window.requestAnimationFrame(animateSomeStuff);      \r\n      }\r\n      animateSomeStuff();\r\n      \r\n      function rerunClick() {\r\n        animationStep = 0;\r\n        doSomeStuff(animationStep);\r\n        bcUpdateSlider(animationStep);\r\n        animationIncrement = Math.abs(animationIncrement);\r\n        animateSomeStuff();\r\n      }\r\n      function backwardsClick() {\r\n        animationStep = bcFinalActivity;\r\n        doSomeStuff(animationStep);\r\n        bcUpdateSlider(animationStep);\r\n        animationIncrement = -Math.abs(animationIncrement);\r\n        animateSomeStuff();\r\n      }\r\n      function pauseClick() {\r\n        cancelAnimationFrame(requestId);\r\n      }\r\n      function continueClick() {\r\n        animateSomeStuff();\r\n      }\r\n      function setSpeed(speed) {\r\n        var mult = 1;\r\n        if (animationIncrement < 0) {\r\n          mult = -1;\r\n        }\r\n        animationIncrement = speed * mult;\r\n      }\r\n<\/pre>\n<p><iframe loading=\"lazy\" width=\"330px\" height=\"480px\" src=\"https:\/\/www.rpchurchill.com\/demo\/animation\/animation_demo_20160620.html\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If we have the full animation state specified for every animation step then one of the easiest things we can do is to change the speed of the animation by changing the increment, which is shown below. Clicking on any &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/06\/20\/reproducing-a-clever-animation-product-part-12\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[87,101,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/824"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=824"}],"version-history":[{"count":4,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/824\/revisions"}],"predecessor-version":[{"id":1451,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/824\/revisions\/1451"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}