{"id":822,"date":"2016-06-16T01:39:30","date_gmt":"2016-06-16T06:39:30","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=822"},"modified":"2017-02-03T14:50:50","modified_gmt":"2017-02-03T19:50:50","slug":"reproducing-a-clever-animation-product-part-11","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/06\/16\/reproducing-a-clever-animation-product-part-11\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 11"},"content":{"rendered":"<p>Here is the updated version that uses the information in the <code>bcTransformList<\/code> to build the cleanest possible stream of transformation events in the <code>bcActivitiesList<\/code>.  The need for a separate structure to hold the initial and final states of the animation has been eliminated and the unique state of every property type for every element is now fully specified for every property animation step.  This makes some very powerful capabilities available that can be explored next week.<\/p>\n<p>Here is the process that populates the <code>bcActivitiesList<\/code> from the <code>bcTransformList<\/code>.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      function writeAnimationSteps() {\r\n        if (bcTransformList.length > 0) {\r\n          for (var i=0; i<bcTransformList.length; i++) {\r\n            var element = bcTransformList[i][0];\r\n            for (var j=1; j<bcTransformList[i].length; j++) {\r\n              var type = bcTransformList[i][j][0];\r\n              for (var k=1; k<bcTransformList[i][j].length; k++) {\r\n                var start = bcTransformList[i][j][k].pStart\r\n                var end = bcTransformList[i][j][k].pEnd;\r\n                var begin = bcTransformList[i][j][k].tBegin;\r\n                var duration = bcTransformList[i][j][k].tDuration;\r\n                var method = bcTransformList[i][j][k].mMethod;\r\n                if (k > 1) {\r\n                  bcSetChainFlag();\r\n                }\r\n                if (type == \"left\") {\r\n                  bcDefineLeftTween(element,start,end,begin,duration,method);\r\n                } else if (type == \"top\") {\r\n                  bcDefineTopTween(element,start,end,begin,duration,method);\r\n                } else if (type == \"opacity\") {\r\n                  bcDefineOpacityTween(element,start,end,begin,duration,method);\r\n                } else if (type == \"display\") {\r\n                  bcDefineDisplayTween(element,start,end,begin);\r\n                } else if (type == \"scale\") {\r\n                  \/\/peel apart the paired parameters\r\n                  var startX;\r\n                  var startY;\r\n                  var endX;\r\n                  var endY;\r\n                  if (start.charAt(0) == \"(\") {\r\n                    var len = start.length - 1;\r\n                    var s = start.substr(1,len-1);\r\n                    var startArray = s.split(\",\");\r\n                    startX = parseFloat(startArray[0]);\r\n                    startY = parseFloat(startArray[1]);\r\n                  } else {\r\n                    startX = start;\r\n                    startY = start;\r\n                  }\r\n                  if (end.charAt(0) == \"(\") {\r\n                    var len = start.length - 1;\r\n                    var s = end.substr(1,len-1);\r\n                    var endArray = s.split(\",\");\r\n                    endX = parseFloat(endArray[0]);\r\n                    endY = parseFloat(endArray[1]);\r\n                  } else {\r\n                    endX = end;\r\n                    endY = end;\r\n                  }\r\n                  bcDefineScaleTween(element,startX,startY,endX,endY,begin,duration,method);\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n<\/pre>\n<p>And here are some of the functions that write out the appropriate streams of activities.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      function bcDefineLeftTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) {\r\n        var s = sElement+\".style.left='\"+pStart+\"px';\";                \/\/initial string value\r\n        var alpha = Math.round(tBegin * 60.0);                         \/\/index of start of transform series\r\n        var steps = Math.round(tDuration * 60.0);                      \/\/number of steps in transform series\r\n        var omega = alpha + steps;                                     \/\/index of end of transform series\r\n        var increment = (pEnd - pStart) \/ steps;                       \/\/increment to use during transform series\r\n        var left = pStart;                                             \/\/initialize tracking value\r\n        var index = bcActivitiesList[0].length-1;                      \/\/determine size of activities list\r\n        if ((alpha > 0) && (!bcChainFlag)) {                           \/\/if need to fill beginning of list AND first of this transform type for this element\r\n          for (var i=0; i<alpha; i++) {    \/\/>                         \/\/  for elements at beginning of list\r\n            bcActivitiesList[i][0] = bcActivitiesList[i].push(s);      \/\/    add the activity and increment the array length\r\n          }\r\n        }\r\n        if (!bcChainFlag) {                                            \/\/if writing for the first time\r\n          index++;                                                     \/\/  bump the index by one\r\n        }\r\n        for (var i=alpha; i<=omega; i++) { \/\/>                         \/\/for the active steps in the transition series\r\n          s = sElement+\".style.left='\"+Math.round(left)+\"px';\";        \/\/updated string value\r\n          bcActivitiesList[i][0] = index+1;                            \/\/set size of array\r\n          bcActivitiesList[i][index] = s;                              \/\/add activity if flag not set, overwrite last if flag is set\r\n          if (mMethod == \"linear\") {                                   \/\/if linear increment\r\n            left += increment;                                         \/\/  add simple increment\r\n          } else if (mMethod == \"vibrate_right\") {                     \/\/if something else more complicated\r\n            var multiplier = i - alpha - (Math.PI*0.5);                \/\/  do the more complicated increment\r\n            multiplier *= 0.3;                                         \/\/  goal is to make this modular in future\r\n            multiplier = Math.cos(multiplier);\r\n            multiplier *= 100.0;\r\n            multiplier *= (omega-i) \/ (omega-alpha);\r\n            \/\/var multiplier = Math.cos(i - alpha - Math.PI*0.5)* 100 * (omega-i) \/ (omega-alpha);\r\n            left = pStart + multiplier;\r\n          }\r\n        }\r\n        for (i=omega+1; i<=bcFinalActivity; i++) {                     \/\/for elements through to the end of the list\r\n          bcActivitiesList[i][0] = index+1;                            \/\/  set size of array\r\n          bcActivitiesList[i][index] = s;                              \/\/  add activity if flag not set, overwrite last if flag is set\r\n        }\r\n        bcClearChainFlag();                                            \/\/clear the flag if set\r\n      }\r\n\r\n\r\n      function bcDefineDisplayTween(sElement,pStart,pEnd,tBegin) {\r\n        var s = sElement+\".style.display='\"+pStart+\"';\";\r\n        var alpha = Math.round(tBegin * 60.0);\r\n        var display = pStart;\r\n        var index = bcActivitiesList[0].length-1;\r\n        if ((alpha > 0) && (!bcChainFlag)) {\r\n          for (var i=0; i<alpha; i++) {    \/\/>\r\n            bcActivitiesList[i][0] = bcActivitiesList[i].push(s);\r\n          }\r\n        }\r\n        if (!bcChainFlag) {\r\n          index++;\r\n        }\r\n        s = sElement+\".style.display='\"+pEnd+\"';\";\r\n        for (i=alpha; i<=bcFinalActivity; i++) {\r\n          bcActivitiesList[i][0] = index+1;\r\n          bcActivitiesList[i][index] = s;\r\n        }\r\n        bcClearChainFlag();\r\n      }\r\n\r\n\r\n      function bcDefineScaleTween(sElement,pStartX,pStartY,pEndX,pEndY,tBegin,tDuration,mMethod) {\r\n        var s = sElement+\".style.transform='scale(\"+pStartX+\",\"+pStartY+\")';\";\r\n        var alpha = Math.round(tBegin * 60.0);\r\n        var steps = Math.round(tDuration * 60.0);\r\n        var omega = alpha + steps;\r\n        var incrementX = (pEndX - pStartX) \/ steps;\r\n        var incrementY = (pEndY - pStartY) \/ steps;\r\n        var scaleX = pStartX;\r\n        var scaleY = pStartY;\r\n        var index = bcActivitiesList[0].length-1;\r\n        if ((alpha > 0) && (!bcChainFlag)) {\r\n          for (var i=0; i<alpha; i++) {    \/\/>\r\n            bcActivitiesList[i][0] = bcActivitiesList[i].push(s);\r\n          }\r\n        }\r\n        if (!bcChainFlag) {\r\n          index++;\r\n        }\r\n        for (var i=alpha; i<=omega; i++) { \/\/>\r\n          s = sElement+\".style.transform='scale(\"+scaleX+\",\"+scaleY+\")';\";\r\n          bcActivitiesList[i][0] = index+1;\r\n          bcActivitiesList[i][index] = s;\r\n          if (mMethod == \"linear\") {\r\n            scaleX += incrementX;\r\n            scaleY += incrementY;\r\n          }\r\n        }\r\n        for (i=omega+1; i<=bcFinalActivity; i++) {\r\n          bcActivitiesList[i][0] = index+1;\r\n          bcActivitiesList[i][index] = s;\r\n        }\r\n        bcClearChainFlag();\r\n      }\r\n<\/pre>\n<p>Moving the slider with the mouse demonstrates how every step of the animation is now properly displayed.  A few things still need to be cleaned up, including being able to use the animation updates when the slider is moved using the arrow keys.<\/p>\n<p><iframe loading=\"lazy\" width=\"330px\" height=\"410px\" src=\"https:\/\/www.rpchurchill.com\/demo\/animation\/animation_demo_20160616.html\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is the updated version that uses the information in the bcTransformList to build the cleanest possible stream of transformation events in the bcActivitiesList. The need for a separate structure to hold the initial and final states of the animation &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/06\/16\/reproducing-a-clever-animation-product-part-11\/\">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\/822"}],"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=822"}],"version-history":[{"count":2,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"predecessor-version":[{"id":1453,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/822\/revisions\/1453"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}