{"id":847,"date":"2016-06-28T04:00:41","date_gmt":"2016-06-28T09:00:41","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=847"},"modified":"2017-02-17T10:39:09","modified_gmt":"2017-02-17T15:39:09","slug":"reproducing-a-clever-animation-product-part-17","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/06\/28\/reproducing-a-clever-animation-product-part-17\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 17"},"content":{"rendered":"

In the interest of making these writings fit with my schedule today and tomorrow I’m going to take a brief detour and describe the next change before completing the one that’s in progress. This will also cover something I’ll be making use of tomorrow. Looking at the current transform definitions in the addTransformToList<\/code> calls:<\/p>\n

      var handle001 = document.getElementById(\"handle001\");\r\n      bcInitElement(handle001,\"301px\",\"50px\",\"red\",\"rgba(0,0,0,0)\",\"260px\",0,\"block\",\"This line slides in, out, in\");\r\n      addTransformToList(\"handle001:1\",0.75,{left:-284, opacity:1.0},\"linear\");\r\n      addTransformToList(\"handle001\",0.50,{left:284},\"linear\");\r\n      addTransformToList(\"handle001:2\",0.75,{left:-284},\"linear\");\r\n      addTransformToList(\"handle001\",0.00,{display:\"none\"},\"\");\r\n      \r\n      var handle002 = document.getElementById(\"handle002\");\r\n      bcInitElement(handle002,\"17px\",\"-25px\",\"blue\",\"rgba(0,0,0,0)\",\"280px\",0,\"block\",\"This line drops down from the top\");\r\n      addTransformToList(\"handle002\",0.75,{top:150, opacity:1.0},\"linear\",\"handle001:1-=0.25\");\r\n      addTransformToList(\"handle002\",0.00,{display:\"none\"},\"\",\"handle001:2\");\r\n\r\n      var handle003 = document.getElementById(\"handle003\");\r\n      bcInitElement(handle003,\"120px\",\"60px\",\"yellow\",\"rgba(0,0,0,0)\",\"80px\",0,\"block\",\"This text grows in scale\");\r\n      \/\/handle003.style.transform = \"rotate(45deg) scale(0.5,0.5)\";\r\n      \/\/handle003.style.transform = \"rotate(45deg)\";\r\n      handle003.style.transform = \"scale(0.5,0.5)\";\r\n      addTransformToList(\"handle003\",0.05,{opacity:1.0},\"linear\",\"handle001:2-=0.05\");\r\n      addTransformToList(\"handle003\",1.50,{scale:\"(2.0,2.0)\"},\"linear\",\"+=0.50\");\r\n<\/pre>\n
..you can see a term for the type of transform as the fourth parameter in each call. In most cases the value is “linear,” which is supposed to mean that the transformation takes place in equal increments across its duration. The value doesn’t matter for transforms that are instantaneous, like those where the display property changes from, say, “block” to “none.” In other cases, which I haven’t developed in this series of posts but which I have implemented in parts, the transition may be nonlinear. It may move at a constant speed over most of the duration of the transform but them slow down towards the end, thus “easing” into place. The tool I’m emulating does this by default. In other cases the element may vibrate around a point, with the initial direction of movement being one way or another (left vs. right, up vs. down…). In other cases the vertical velocity may be modified by a form of “gravity” which slows the upward speed and then increases the downward speed. Other types are possible.<\/p>\n
The Greensock demo I referenced yesterday<\/a> doesn’t do anything special in this respect, so the function parameter can usually be omitted. “Linear” or nothing can be assumed, unless something special is needed, and then a string or object literal can be included that provides the necessary information. In the meantime I’m going to move the parameter to be the fifth (and currently last) parameter in the function call, so the updated code will look like this:<\/p>\n
      var handle001 = document.getElementById(\"handle001\");\r\n      bcInitElement(handle001,\"301px\",\"50px\",\"red\",\"rgba(0,0,0,0)\",\"260px\",0,\"block\",\"This line slides in, out, in\");\r\n      addTransformToList(\"handle001:1\",0.75,{left:-284, opacity:1.0});\r\n      addTransformToList(\"handle001\",0.50,{left:284});\r\n      addTransformToList(\"handle001:2\",0.75,{left:-284});\r\n      addTransformToList(\"handle001\",0.00,{display:\"none\"});\r\n      \r\n      var handle002 = document.getElementById(\"handle002\");\r\n      bcInitElement(handle002,\"17px\",\"-25px\",\"blue\",\"rgba(0,0,0,0)\",\"280px\",0,\"block\",\"This line drops down from the top\");\r\n      addTransformToList(\"handle002\",0.75,{top:150, opacity:1.0},\"handle001:1-=0.25\");\r\n      addTransformToList(\"handle002\",0.00,{display:\"none\"},\"handle001:2\");\r\n\r\n      var handle003 = document.getElementById(\"handle003\");\r\n      bcInitElement(handle003,\"120px\",\"60px\",\"yellow\",\"rgba(0,0,0,0)\",\"80px\",0,\"block\",\"This text grows in scale\");\r\n      handle003.style.transform = \"scale(0.5,0.5)\";\r\n      addTransformToList(\"handle003\",0.05,{opacity:1.0},\"handle001:2-=0.05\");\r\n      addTransformToList(\"handle003\",1.50,{scale:\"(2.0,2.0)\"},\"+=0.50\");\r\n<\/pre>\n
It turns out that if a given parameter in a function call is not provided in JavaScript that the interpreter will define the item’s type as “undefined” in a way that can be tested for as follows:<\/p>\n
      \/\/original declaration\r\n      function addTransformToList(sElement,tDuration,trans,mMethod,tAdjustment) {\r\n      ...\r\n\r\n\r\n      \/\/updated declaration\r\n      function addTransformToList(sElement,tDuration,trans,tAdjustment,mMethod) {\r\n        var tAdjustment = typeof tAdjustment !== \"undefined\" tAdjustment : \"\";\r\n        var mMethod = typeof mMethod !== \"undefined\" mMethod : \"linear\";\r\n        ...\r\n<\/pre>\n
Here I’ve swapped the order of the method and adjustment parameters. I also now test the type of both parameters. If the parameter is present I interpret and use it as appropriate and if the parameter is not<\/em> present I give it a default value that covers most of the cases. Here are how the resultant function calls might look:<\/p>\n
      \/\/standard call, no offsets in time, no special transitions\r\n      addTransformToList(\"handle001\",0.75,{left:-284, opacity:1.0});\r\n\r\n      \/\/adds offset in time from end of previous transition\r\n      \/\/     ...or the one that ends the latest as defined so far \r\n      addTransformToList(\"handle002\",0.50,{top:150},\"+=0.50\");\r\n\r\n      \/\/adds offset in time from the end of a named transition, defines an effect\r\n      addTransformToList(\"handle003\",1.00,{scale:\"(2.0,2.0)\"},\"handle002\",{easeIn:(0.90,0.20)});\r\n\r\n      \/\/no transition in time, but placeholder required\r\n      \/\/defines a special transition effect\r\n      addTransformToList(\"handle004\",0.60,{left:100},,\"{vibrate:(\"right\",50,0.5)});\r\n<\/pre>\n
At root some pretty complicated animation behaviors can be defined with minimal expression in user code. The code needed to support this in the background isn’t trivial, but the idea is for me to do as much work as possible so the user of the tool doesn’t have to. I do it once (in theory) and a bunch of people then get to save all their time.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the interest of making these writings fit with my schedule today and tomorrow I’m going to take a brief detour and describe the next change before completing the one that’s in progress. This will also cover something I’ll 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,106,101,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/847"}],"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=847"}],"version-history":[{"count":3,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/847\/revisions"}],"predecessor-version":[{"id":1642,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/847\/revisions\/1642"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}