I want to make the handling of the mMethod parameter in the bcDefineWhateverTween function more flexible and modular. As you can see in the code below, the parsing of the different types of methods or applied effects has to be handled in every tween definition. Even worse, the code all has to be peeled apart and processed in every individual case.
Therefore, I’m going to try to define a wrapper function that takes the mMethod parameter, and the values for pStart, pEnd, alpha, omega, and i, and return the desired output value for that animation step. I think we’re giving up the need to peel apart the mMethod during every call in order to get a more streamlined expression where the animation step values are assigned and the ability to have to only use a single copy of the code in all tweens.
Note that this approach is expected to work for numeric tweens. It is not necessary for tweens that merely change state in a single step (like the display CSS parameter). This approach may or may not prove troublesome for other types of tweens.
|
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 |
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 } |
I’m thinking the new version of the bcDefineWhateverTween function should look 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 |
function bcDefineLeftTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) { var s = sElement+".style.left='"+pStart+"px';"; var alpha = Math.round(tBegin * 60.0); var steps = Math.round(tDuration * 60.0); var omega = alpha + steps; var increment = (pEnd - pStart) / steps; var left = 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++; } for (var i=alpha; i<=omega; i++) { //> s = sElement+".style.left='"+Math.round(left)+"px';"; bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; //this line replaces everything we included above left = processEffect(pStart,pEnd,alpha,omega,i,mMethod); } for (i=omega+1; i<=bcFinalActivity; i++) { bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; } bcClearChainFlag(); } |
Note that in the first example, in the code as it currently exists, that the left parameter is incremented in the linear case and set absolutely in the vibrate_right case. We therefore have to come up with a consistent treatment for generating results with the proposed processEffect function. I believe it will be preferable to generate the result in a form that can be used in an absolute assignment.