Here is the updated version that uses the information in the bcTransformList to build the cleanest possible stream of transformation events in the bcActivitiesList. The need for a separate structure to hold the initial and final states of the animation has been eliminated and the unique state of every property type for every element is now fully specified for every property animation step. This makes some very powerful capabilities available that can be explored next week.
Here is the process that populates the bcActivitiesList from the bcTransformList.
|
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 |
function writeAnimationSteps() { if (bcTransformList.length > 0) { for (var i=0; i<bcTransformList.length; i++) { var element = bcTransformList[i][0]; for (var j=1; j<bcTransformList[i].length; j++) { var type = bcTransformList[i][j][0]; for (var k=1; k<bcTransformList[i][j].length; k++) { var start = bcTransformList[i][j][k].pStart var end = bcTransformList[i][j][k].pEnd; var begin = bcTransformList[i][j][k].tBegin; var duration = bcTransformList[i][j][k].tDuration; var method = bcTransformList[i][j][k].mMethod; if (k > 1) { bcSetChainFlag(); } if (type == "left") { bcDefineLeftTween(element,start,end,begin,duration,method); } else if (type == "top") { bcDefineTopTween(element,start,end,begin,duration,method); } else if (type == "opacity") { bcDefineOpacityTween(element,start,end,begin,duration,method); } else if (type == "display") { bcDefineDisplayTween(element,start,end,begin); } else if (type == "scale") { //peel apart the paired parameters var startX; var startY; var endX; var endY; if (start.charAt(0) == "(") { var len = start.length - 1; var s = start.substr(1,len-1); var startArray = s.split(","); startX = parseFloat(startArray[0]); startY = parseFloat(startArray[1]); } else { startX = start; startY = start; } if (end.charAt(0) == "(") { var len = start.length - 1; var s = end.substr(1,len-1); var endArray = s.split(","); endX = parseFloat(endArray[0]); endY = parseFloat(endArray[1]); } else { endX = end; endY = end; } bcDefineScaleTween(element,startX,startY,endX,endY,begin,duration,method); } } } } } } |
And here are some of the functions that write out the appropriate streams of activities.
|
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 94 95 |
function bcDefineLeftTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) { var s = sElement+".style.left='"+pStart+"px';"; //initial string value var alpha = Math.round(tBegin * 60.0); //index of start of transform series var steps = Math.round(tDuration * 60.0); //number of steps in transform series var omega = alpha + steps; //index of end of transform series var increment = (pEnd - pStart) / steps; //increment to use during transform series var left = pStart; //initialize tracking value var index = bcActivitiesList[0].length-1; //determine size of activities list if ((alpha > 0) && (!bcChainFlag)) { //if need to fill beginning of list AND first of this transform type for this element for (var i=0; i<alpha; i++) { //> // for elements at beginning of list bcActivitiesList[i][0] = bcActivitiesList[i].push(s); // add the activity and increment the array length } } if (!bcChainFlag) { //if writing for the first time index++; // bump the index by one } for (var i=alpha; i<=omega; i++) { //> //for the active steps in the transition series s = sElement+".style.left='"+Math.round(left)+"px';"; //updated string value bcActivitiesList[i][0] = index+1; //set size of array bcActivitiesList[i][index] = s; //add activity if flag not set, overwrite last if flag is set if (mMethod == "linear") { //if linear increment left += increment; // add simple increment } else if (mMethod == "vibrate_right") { //if something else more complicated var multiplier = i - alpha - (Math.PI*0.5); // do the more complicated increment multiplier *= 0.3; // goal is to make this modular in future multiplier = Math.cos(multiplier); multiplier *= 100.0; multiplier *= (omega-i) / (omega-alpha); //var multiplier = Math.cos(i - alpha - Math.PI*0.5)* 100 * (omega-i) / (omega-alpha); left = pStart + multiplier; } } for (i=omega+1; i<=bcFinalActivity; i++) { //for elements through to the end of the list bcActivitiesList[i][0] = index+1; // set size of array bcActivitiesList[i][index] = s; // add activity if flag not set, overwrite last if flag is set } bcClearChainFlag(); //clear the flag if set } function bcDefineDisplayTween(sElement,pStart,pEnd,tBegin) { var s = sElement+".style.display='"+pStart+"';"; var alpha = Math.round(tBegin * 60.0); var display = pStart; var index = bcActivitiesList[0].length-1; if ((alpha > 0) && (!bcChainFlag)) { for (var i=0; i<alpha; i++) { //> bcActivitiesList[i][0] = bcActivitiesList[i].push(s); } } if (!bcChainFlag) { index++; } s = sElement+".style.display='"+pEnd+"';"; for (i=alpha; i<=bcFinalActivity; i++) { bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; } bcClearChainFlag(); } function bcDefineScaleTween(sElement,pStartX,pStartY,pEndX,pEndY,tBegin,tDuration,mMethod) { var s = sElement+".style.transform='scale("+pStartX+","+pStartY+")';"; var alpha = Math.round(tBegin * 60.0); var steps = Math.round(tDuration * 60.0); var omega = alpha + steps; var incrementX = (pEndX - pStartX) / steps; var incrementY = (pEndY - pStartY) / steps; var scaleX = pStartX; var scaleY = pStartY; var index = bcActivitiesList[0].length-1; if ((alpha > 0) && (!bcChainFlag)) { for (var i=0; i<alpha; i++) { //> bcActivitiesList[i][0] = bcActivitiesList[i].push(s); } } if (!bcChainFlag) { index++; } for (var i=alpha; i<=omega; i++) { //> s = sElement+".style.transform='scale("+scaleX+","+scaleY+")';"; bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; if (mMethod == "linear") { scaleX += incrementX; scaleY += incrementY; } } for (i=omega+1; i<=bcFinalActivity; i++) { bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; } bcClearChainFlag(); } |
Moving the slider with the mouse demonstrates how every step of the animation is now properly displayed. A few things still need to be cleaned up, including being able to use the animation updates when the slider is moved using the arrow keys.