Yesterday’s attempt wasn’t too bad; I needed to fix the declaration and use of the object that holds the transform information (yesterday’s form only works if you initialize the internal member values with literals) and I needed to tweak a couple of indexes. The corrected code is shown below, along with an extra function for displaying the information.<\/p>\n
\r\n var bcTransformList = new Array;\r\n\r\n function tObj(pStart,pEnd,tBegin,tDuration,mMethod) {\r\n this.pStart = pStart;\r\n this.pEnd = pEnd;\r\n this.tBegin = tBegin;\r\n this.tDuration = tDuration;\r\n this.mMethod = mMethod;\r\n }\r\n\r\n function addTransformToList(sElement,sType,pStart,pEnd,tBegin,tDuration,mMethod) {\r\n var obj = new tObj(pStart,pEnd,tBegin,tDuration,mMethod);\r\n if (bcTransformList.length > 0) {\r\n var i = 0;\r\n while (i < bcTransformList.length) {\r\n if (sElement == bcTransformList[i][0]) {\r\n break;\r\n }\r\n i++;\r\n }\r\n if (i < bcTransformList.length) { \/\/element already in list, add to it\r\n var j = 0; \/\/don't have to check for empty type list\r\n while (j < bcTransformList[i].length) {\r\n if (sType == bcTransformList[i][j][0]) {\r\n break;\r\n }\r\n j++;\r\n }\r\n if (j < bcTransformList[i].length) { \/\/type already in list, add object to existing sublist\r\n bcTransformList[i][j].push(obj);\r\n } else { \/\/type not already in list, add it\r\n bcTransformList[i][j] = new Array;\r\n bcTransformList[i][j][0] = sType;\r\n bcTransformList[i][j][1] = obj;\r\n }\r\n } else { \/\/element new to list, add to end\r\n bcTransformList[i] = new Array;\r\n bcTransformList[i][0] = sElement;\r\n bcTransformList[i][1] = new Array;\r\n bcTransformList[i][1][0] = sType;\r\n bcTransformList[i][1][1] = obj;\r\n } \r\n } else { \/\/this is the first element\r\n bcTransformList[0] = new Array;\r\n bcTransformList[0][0] = sElement;\r\n bcTransformList[0][1] = new Array;\r\n bcTransformList[0][1][0] = sType;\r\n bcTransformList[0][1][1] = obj;\r\n }\r\n }\r\n\r\n function orderTransformList() {\r\n if (bcTransformList.length > 0) {\r\n for (var i=0; i 2) { \/\/if there are multiple elements, sort them\r\n var tempObj = new Array;\r\n tempObj[0] = bcTransformList[i][j][0]; \/\/type\r\n tempObj[1] = bcTransformList[i][j][1]; \/\/first element\r\n for (var k=2; k= tempObj[n].tBegin)) {\r\n n++;\r\n }\r\n tempObj.splice(n,0,bcTransformList[i][j][k]); \/\/subsequent elements, in order\r\n }\r\n bcTransformList[i][j] = tempObj;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n function displayTransformList() {\r\n var s = \"TransformList
\";\r\n if (bcTransformList.length > 0) {\r\n for (var i=0; iHere is how I loaded up the array. It includes a series of three transformations for the left location of the first object, but out of order. It then displays the information before sorting, does the sort, and displays the information again after the sort.<\/p>\n
\r\n addTransformToList(\"handle001\",\"left\",301,25,0.0,0.75,\"linear\");\r\n addTransformToList(\"handle001\",\"left\",301,25,4.0,0.5,\"linear\");\r\n addTransformToList(\"handle001\",\"left\",25,301,2.0,1.0,\"linear\");\r\n addTransformToList(\"handle001\",\"opacity\",0.0,1.0,0.0,0.75,\"linear\");\r\n addTransformToList(\"handle002\",\"top\",-25,125,0.5,0.75,\"linear\");\r\n addTransformToList(\"handle002\",\"opacity\",0.0,1.0,0.5,0.75,\"linear\");\r\n\r\n displayTransformList();\r\n alert(\"before sorting\")\r\n orderTransformList();\r\n displayTransformList();\r\n alert(\"after sorting\")\r\n<\/pre>\nHere’s the output before the sort:
\n
\nTransformList
\nElement: handle001
\nType: left
\nstart: 301 end: 25 begin: 0 duration: 0.75 method: linear
\nstart: 301 end: 25 begin: 4 duration: 0.5 method: linear
\nstart: 25 end: 301 begin: 2 duration: 1 method: linear
\nType: opacity
\nstart: 0 end: 1 begin: 0 duration: 0.75 method: linear
\nElement: handle002
\nType: top
\nstart: -25 end: 125 begin: 0.5 duration: 0.75 method: linear
\nType: opacity
\nstart: 0 end: 1 begin: 0.5 duration: 0.75 method: linear
\n<\/code><\/p>\n…and here it is after the sort:
\n
\nTransformList
\nElement: handle001
\nType: left
\nstart: 301 end: 25 begin: 0 duration: 0.75 method: linear
\nstart: 25 end: 301 begin: 2 duration: 1 method: linear
\nstart: 301 end: 25 begin: 4 duration: 0.5 method: linear
\nType: opacity
\nstart: 0 end: 1 begin: 0 duration: 0.75 method: linear
\nElement: handle002
\nType: top
\nstart: -25 end: 125 begin: 0.5 duration: 0.75 method: linear
\nType: opacity
\nstart: 0 end: 1 begin: 0.5 duration: 0.75 method: linear
\n<\/code><\/p>\nNow that this is done I can modify the tween definition functions to write out the full and correct state of every element for every animation step.<\/p>\n
Also, it can be argued that it’s unnecessary to specify the beginning and ending state of each transform. The properties to be transformed are already initialized, so in theory the transform functions would only have to specify what the new value should be. That would obviate the need to correctly specify the initial value of a property as being the same as the final value from then end of a previous transformation. I note that the Greensock<\/a> product does this, including not just a “to” transform but also a “from” transform. If you initialize all the elements where you want them to end up you can get an idea of the final layout, and then the animation sequence can start from where you specify and end up where they were initialized. That said, one thing at a time…<\/p>\n","protected":false},"excerpt":{"rendered":"Yesterday’s attempt wasn’t too bad; I needed to fix the declaration and use of the object that holds the transform information (yesterday’s form only works if you initialize the internal member values with literals) and I needed to tweak a … Continue reading