{"id":867,"date":"2016-07-11T22:08:57","date_gmt":"2016-07-12T03:08:57","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=867"},"modified":"2016-07-11T22:09:55","modified_gmt":"2016-07-12T03:09:55","slug":"reproducing-a-clever-animation-product-part-22","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/07\/11\/reproducing-a-clever-animation-product-part-22\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 22"},"content":{"rendered":"

I want to make the handling of the mMethod<\/code> parameter in the bcDefineWhatever<\/em>Tween<\/code> function more flexible and modular. As you can see in the code below, the parsing of the different types of methods or applied effects has to be handled in every tween definition. Even worse, the code all has to be peeled apart and processed in every individual case.<\/p>\n

Therefore, I’m going to try to define a wrapper function that takes the mMethod<\/code> parameter, and the values for pStart<\/code>, pEnd<\/code>, alpha<\/code>, omega<\/code>, and i<\/code>, and return the desired output value for that animation step. I think we’re giving up the need to peel apart the mMethod<\/code> during every call in order to get a more streamlined expression where the animation step values are assigned and the ability to have to only use a single copy of the code in all tweens.<\/p>\n

Note that this approach is expected to work for numeric tweens. It is not necessary for tweens that merely change state in a single step (like the display CSS parameter). This approach may or may not prove troublesome for other types of tweens.<\/p>\n

\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                         \/\/  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<\/pre>\n
I'm thinking the new version of the bcDefineWhatever<\/em>Tween<\/code> function should look like this:<\/p>\n
\r\n      function bcDefineLeftTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) {\r\n        var s = sElement+\".style.left='\"+pStart+\"px';\";\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 increment = (pEnd - pStart) \/ steps;\r\n        var left = pStart;\r\n        var index = bcActivitiesList[0].length-1;\r\n        if ((alpha > 0) && (!bcChainFlag)) {\r\n          for (var i=0; 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.left='\"+Math.round(left)+\"px';\";\r\n          bcActivitiesList[i][0] = index+1;\r\n          bcActivitiesList[i][index] = s;\r\n          \/\/this line replaces everything we included above\r\n          left = processEffect(pStart,pEnd,alpha,omega,i,mMethod);\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
Note that in the first example, in the code as it currently exists, that the left<\/code> parameter is incremented in the linear case and set absolutely in the vibrate_right case.  We therefore have to come up with a consistent treatment for generating results with the proposed processEffect<\/code> function.  I believe it will be preferable to generate the result in a form that can be used in an absolute assignment.<\/p>\n","protected":false},"excerpt":{"rendered":"
I want to make the handling of the mMethod parameter in the bcDefineWhateverTween function more flexible and modular. As you can see in the code below, the parsing of the different types of methods or applied effects has to be … Continue reading →<\/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\/867"}],"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=867"}],"version-history":[{"count":2,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/867\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}