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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
var bcTransformList = new Array; function tObj(pStart,pEnd,tBegin,tDuration,mMethod) { this.pStart = pStart; this.pEnd = pEnd; this.tBegin = tBegin; this.tDuration = tDuration; this.mMethod = mMethod; } function addTransformToList(sElement,sType,pStart,pEnd,tBegin,tDuration,mMethod) { var obj = new tObj(pStart,pEnd,tBegin,tDuration,mMethod); if (bcTransformList.length > 0) { var i = 0; while (i < bcTransformList.length) { if (sElement == bcTransformList[i][0]) { break; } i++; } if (i < bcTransformList.length) { //element already in list, add to it var j = 0; //don't have to check for empty type list while (j < bcTransformList[i].length) { if (sType == bcTransformList[i][j][0]) { break; } j++; } if (j < bcTransformList[i].length) { //type already in list, add object to existing sublist bcTransformList[i][j].push(obj); } else { //type not already in list, add it bcTransformList[i][j] = new Array; bcTransformList[i][j][0] = sType; bcTransformList[i][j][1] = obj; } } else { //element new to list, add to end bcTransformList[i] = new Array; bcTransformList[i][0] = sElement; bcTransformList[i][1] = new Array; bcTransformList[i][1][0] = sType; bcTransformList[i][1][1] = obj; } } else { //this is the first element bcTransformList[0] = new Array; bcTransformList[0][0] = sElement; bcTransformList[0][1] = new Array; bcTransformList[0][1][0] = sType; bcTransformList[0][1][1] = obj; } } function orderTransformList() { if (bcTransformList.length > 0) { for (var i=0; i<bcTransformList.length; i++) { //for each element for (var j=1; j<bcTransformList[i].length; j++) { //for each type if (bcTransformList[i][j].length > 2) { //if there are multiple elements, sort them var tempObj = new Array; tempObj[0] = bcTransformList[i][j][0]; //type tempObj[1] = bcTransformList[i][j][1]; //first element for (var k=2; k<bcTransformList[i][j].length; k++) { var n = 1; while ((n < tempObj.length) && (bcTransformList[i][j][k].tBegin >= tempObj[n].tBegin)) { n++; } tempObj.splice(n,0,bcTransformList[i][j][k]); //subsequent elements, in order } bcTransformList[i][j] = tempObj; } } } } } function displayTransformList() { var s = "TransformList<br />"; if (bcTransformList.length > 0) { for (var i=0; i<bcTransformList.length; i++) { s += "Element: " + bcTransformList[i][0] + "<br />"; for (var j=1; j<bcTransformList[i].length; j++) { s += "Type: " + bcTransformList[i][j][0] + "<br />"; for (var k=1; k<bcTransformList[i][j].length; k++) { s += "start: "+bcTransformList[i][j][k].pStart+ " end: "+bcTransformList[i][j][k].pEnd+ " begin: "+bcTransformList[i][j][k].tBegin+ " duration: "+bcTransformList[i][j][k].tDuration+ " method: " +bcTransformList[i][j][k].mMethod+ "<br />"; } } } } tList = document.getElementById("transformList"); tList.innerHTML = s; } |
Here 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
addTransformToList("handle001","left",301,25,0.0,0.75,"linear"); addTransformToList("handle001","left",301,25,4.0,0.5,"linear"); addTransformToList("handle001","left",25,301,2.0,1.0,"linear"); addTransformToList("handle001","opacity",0.0,1.0,0.0,0.75,"linear"); addTransformToList("handle002","top",-25,125,0.5,0.75,"linear"); addTransformToList("handle002","opacity",0.0,1.0,0.5,0.75,"linear"); displayTransformList(); alert("before sorting") orderTransformList(); displayTransformList(); alert("after sorting") |
Here’s the output before the sort:
TransformList
Element: handle001
Type: left
start: 301 end: 25 begin: 0 duration: 0.75 method: linear
start: 301 end: 25 begin: 4 duration: 0.5 method: linear
start: 25 end: 301 begin: 2 duration: 1 method: linear
Type: opacity
start: 0 end: 1 begin: 0 duration: 0.75 method: linear
Element: handle002
Type: top
start: -25 end: 125 begin: 0.5 duration: 0.75 method: linear
Type: opacity
start: 0 end: 1 begin: 0.5 duration: 0.75 method: linear
…and here it is after the sort:
TransformList
Element: handle001
Type: left
start: 301 end: 25 begin: 0 duration: 0.75 method: linear
start: 25 end: 301 begin: 2 duration: 1 method: linear
start: 301 end: 25 begin: 4 duration: 0.5 method: linear
Type: opacity
start: 0 end: 1 begin: 0 duration: 0.75 method: linear
Element: handle002
Type: top
start: -25 end: 125 begin: 0.5 duration: 0.75 method: linear
Type: opacity
start: 0 end: 1 begin: 0.5 duration: 0.75 method: linear
Now 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.
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 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…