Today I finally finished handling adjustments to the starting time of events in the animation, using the same syntax as the Greensock product I’ve been emulating.
In order to do this cleanly I chose to build a separate list of timing events to which I could refer. This is an array of objects where each object is comprised of an element name (possibly with an extension, e.g., “:1”), an absolute starting time, and an absolute ending time. If a value is provided for the fifth (optional) parameter in the addTransformToList function then it may have two parts. One part would be a label used for a previous element, in which case the event would start at the end to the first transform event defined for that element. The other part could be a time offset, which modifies the start time based on the time just described or, by default, the end of the most recently defined transformation that extended the overall length of the animation.
The memory structures are defined like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var tBeginRolling = 0.00; //cumulative delay before starting each transform var bcStartTimeList = new Array; function timerListObj(sElement,tBegin,tDuration) { this.sElement = sElement; this.tBegin = tBegin; this.tEnd = tBegin + tDuration; this.setTBegin = function(tBegin) { this.tBegin = tBegin; } this.setTEnd = function(tDuration) { this.tEnd = this.tBegin + tDuration; } } |
The parsing of adjustments is accomplished like this:
|
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 |
function addTransformToList(sElement,tDuration,trans,mMethod = "linear",tAdjustment = "") { var longsElement = sElement; var pos = sElement.search(":"); if (pos > 0) { var nameElement = sElement.substr(0,pos); } else { var nameElement = sElement; } //figure out starting time var tBegin = tBeginRolling; //default starting time var tListObj = new timerListObj(sElement,tBegin,tDuration); if (tAdjustment == "") { //if no adjustment specified tBeginRolling = tBegin + tDuration; } else { var tAdj = 0.0; var mult = 1.0; var baseTime = tBeginRolling; //find equals sign var pos = tAdjustment.search("="); if (pos > 0) { //found var sAdj = tAdjustment.substr(pos); tAdj = parseFloat(sAdj.substr(1)); if (tAdjustment.charAt(pos-1) == "-") { mult = -1.0; } else if (tAdjustment.charAt(pos-1) == "+") { mult = 1.0; } tAdjustment = tAdjustment.substr(0,pos-1); //label, if any } //now see if the adjustment refers to a previous element if (tAdjustment.length > 0) { //see if label in list var i = 0; while (i < bcStartTimeList.length) { if (bcStartTimeList[i].sElement == tAdjustment) { break; } i++; } if (i < bcStartTimeList.length) { baseTime = bcStartTimeList[i].tEnd + (tAdj * mult); tListObj.setTBegin(baseTime); tListObj.setTEnd(tDuration); } } else { baseTime = tBeginRolling + (tAdj * mult); tListObj.setTBegin(baseTime); tListObj.setTEnd(tDuration); } if ((baseTime + tDuration) > tBeginRolling) { tBeginRolling = baseTime + tDuration; } tBegin = baseTime; } bcStartTimeList.push(tListObj); ... //the rest of the function is unchanged |
The animation should look just the same as it has before, but using entirely new and, theoretically, more flexible notation.