{"id":856,"date":"2016-07-05T20:48:45","date_gmt":"2016-07-06T01:48:45","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=856"},"modified":"2017-02-03T14:40:47","modified_gmt":"2017-02-03T19:40:47","slug":"reproducing-a-clever-animation-product-part-19","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/07\/05\/reproducing-a-clever-animation-product-part-19\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 19"},"content":{"rendered":"<p>Today I finally finished handling adjustments to the starting time of events in the animation, using the same syntax as the <a href=\"http:\/\/greensock.com\/sequence-video\">Greensock<\/a> product I&#8217;ve been emulating.<\/p>\n<p>In order to do this cleanly I chose to build a separate list of timing events to which I could refer.  This is an array of objects where each object is comprised of an element name (possibly with an extension, e.g., &#8220;:1&#8221;), an absolute starting time, and an absolute ending time.  If a value is provided for the fifth (optional) parameter in the <code>addTransformToList<\/code> function then it may have two parts.  One part would be a label used for a previous element, in which case the event would start at the end to the first transform event defined for that element.  The other part could be a time offset, which modifies the start time based on the time just described or, by default, the end of the most recently defined transformation that extended the overall length of the animation.<\/p>\n<p>The memory structures are defined like this:<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      var tBeginRolling = 0.00;   \/\/cumulative delay before starting each transform\r\n\r\n      var bcStartTimeList = new Array;\r\n      \r\n      function timerListObj(sElement,tBegin,tDuration) {\r\n        this.sElement = sElement;\r\n        this.tBegin = tBegin;\r\n        this.tEnd = tBegin + tDuration;\r\n        this.setTBegin = function(tBegin) {\r\n          this.tBegin = tBegin;\r\n        }\r\n        this.setTEnd = function(tDuration) {\r\n          this.tEnd = this.tBegin + tDuration;\r\n        }\r\n      }\r\n<\/pre>\n<p>The parsing of adjustments is accomplished like this:<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      function addTransformToList(sElement,tDuration,trans,mMethod = \"linear\",tAdjustment = \"\") {\r\n        var longsElement = sElement;\r\n        var pos = sElement.search(\":\");\r\n        if (pos > 0) {\r\n          var nameElement = sElement.substr(0,pos);\r\n        } else {\r\n          var nameElement = sElement;\r\n        }\r\n        \/\/figure out starting time\r\n        var tBegin = tBeginRolling;  \/\/default starting time\r\n        var tListObj = new timerListObj(sElement,tBegin,tDuration);\r\n        if (tAdjustment == \"\") {  \/\/if no adjustment specified\r\n          tBeginRolling = tBegin + tDuration; \r\n        } else {\r\n          var tAdj = 0.0;\r\n          var mult = 1.0;\r\n          var baseTime = tBeginRolling;\r\n          \/\/find equals sign\r\n          var pos = tAdjustment.search(\"=\");\r\n          if (pos > 0) {  \/\/found\r\n            var sAdj = tAdjustment.substr(pos);\r\n            tAdj = parseFloat(sAdj.substr(1));\r\n            if (tAdjustment.charAt(pos-1) == \"-\") {\r\n              mult = -1.0;\r\n            } else if (tAdjustment.charAt(pos-1) == \"+\") {\r\n              mult = 1.0;\r\n            }\r\n            tAdjustment = tAdjustment.substr(0,pos-1);  \/\/label, if any\r\n          }\r\n          \/\/now see if the adjustment refers to a previous element\r\n          if (tAdjustment.length > 0) {\r\n            \/\/see if label in list\r\n            var i = 0;\r\n            while (i < bcStartTimeList.length) {\r\n              if (bcStartTimeList[i].sElement == tAdjustment) {\r\n                break;\r\n              }\r\n              i++;\r\n            }\r\n            if (i < bcStartTimeList.length) {\r\n              baseTime = bcStartTimeList[i].tEnd + (tAdj * mult);\r\n              tListObj.setTBegin(baseTime);\r\n              tListObj.setTEnd(tDuration);\r\n            }\r\n          } else {\r\n            baseTime = tBeginRolling + (tAdj * mult); \r\n            tListObj.setTBegin(baseTime);\r\n            tListObj.setTEnd(tDuration);\r\n          }\r\n          if ((baseTime + tDuration) > tBeginRolling) {\r\n            tBeginRolling = baseTime + tDuration;\r\n          }\r\n          tBegin = baseTime;\r\n        }\r\n        bcStartTimeList.push(tListObj);\r\n\r\n        ...\r\n        \/\/the rest of the function is unchanged\r\n<\/pre>\n<p>The animation should look just the same as it has before, but using entirely new and, theoretically, more flexible notation.<\/p>\n<p><iframe loading=\"lazy\" width=\"330px\" height=\"480px\" src=\"https:\/\/www.rpchurchill.com\/demo\/animation\/animation_demo_20160705.html\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I finally finished handling adjustments to the starting time of events in the animation, using the same syntax as the Greensock product I&#8217;ve been emulating. In order to do this cleanly I chose to build a separate list of &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/07\/05\/reproducing-a-clever-animation-product-part-19\/\">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\/856"}],"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=856"}],"version-history":[{"count":4,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/856\/revisions"}],"predecessor-version":[{"id":1443,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/856\/revisions\/1443"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}