Continuing on from yesterday, once we get the transforms into a nice compact list in time order by type and by element we can go ahead and define the tweens for each type of transformation stream. However, I noticed that I had a particular type of tween that took extra parameters.
|
1 2 3 4 5 6 7 |
//most tween functions look like this function bcDefineLeftTween( sElement,pStart,pEnd,tBegin,tDuration,mMethod) { //this one requires a pair of parameters for both the start and end state function bcDefineScaleTween( sElement,pStartX,pStartY,pEndX,pEndY,tBegin,tDuration,mMethod) { |
The addTransformToList function, however, only allows for a single beginning and ending state parameter. What I chose to do today, which was needlessly complex, was to make the addTransformToList function handle strings with multiple parameters, separated by commas, if they are enclosed in parentheses. Here’s how the calls look, next to the original tween definitions:
|
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 |
var handle001 = document.getElementById("handle001"); bcInitElement(handle001,"201px","50px","red","rgba(0,0,0,0)","260px",0,"block","This line slides in, out, in"); addTransformToList("handle001","left",301,25,0.00,0.75,"linear"); addTransformToList("handle001","left",301,25,1.25,0.75,"linear"); addTransformToList("handle001","left",25,301,0.75,0.50,"linear"); addTransformToList("handle001","opacity",0.0,1.0,0.0,0.75,"linear"); addTransformToList("handle001","display","block","none",2.00,0.00,""); //bcDefineLeftTween("handle001",301,25,0.0,0.75,"linear"); //bcDefineOpacityTween("handle001",0.0,1.0,0.0,0.75,"linear") //bcDefineHideTween("handle001",2.00); var handle002 = document.getElementById("handle002"); bcInitElement(handle002,"13px","-25px","blue","rgba(0,0,0,0)","280px",0,"block","This line drops down from the top"); addTransformToList("handle002","top",-25,125,0.50,0.75,"linear"); addTransformToList("handle002","opacity",0.0,1.0,0.50,0.75,"linear"); addTransformToList("handle002","display","block","none",2.00,0.00,""); //bcDefineTopTween("handle002",-25,125,0.5,0.75,"linear"); //bcDefineOpacityTween("handle002",0.0,1.0,0.5,0.75,"linear") //bcDefineHideTween("handle002",2.00); var handle003 = document.getElementById("handle003"); bcInitElement(handle003,"120px","60px","yellow","rgba(0,0,0,0)","80px",0,"block","This text grows in scale"); handle003.style.transform = "scale(1.0,1.0)"; addTransformToList("handle003","opacity",0.0,1.0,1.95,0.05,"linear"); addTransformToList("handle003","scale","(1.0,1.0)","(2.0,2.0)",2.50,1.50,"linear"); //bcDefineOpacityTween("handle003",0.0,1.0,1.95,0.05,"linear") //bcDefineScaleTween("handle003",1.0,1.0,2.0,2.0,2.50,1.50,"linear"); |
Here you’ll notice that the starting and ending state parameters for the scale transformation are in the form "(1.0,1.0)" and "(2.0,2.0)". This is needlessly complex because I could just provide a single value for the scale factor in the addTransformToList function and use it for both the X and Y scale factors in the bcDefineScaleTween function. If I want to be able to manipulate the X and Y scales independently I can just use the scaleX and scaleY transforms, couldn’t I?
Well, I thought it was a good exercise so this is the way I did it. I wouldn’t do this a second before it was needed in a professional environment (in Agile and TDD space you don’t do anything until you absolutely need to, which is supposed to prevent you from taking detours to guild various lilies), but if the point of these exertions is just to learn then the occasional lily will get guilded.
Since I’ve chosen to support this type of compound parameter (and note that different CSS transform functions may take 2, 3, 4, 6, or even 16 parameters) I also found it necessary to do some checking to see if the formats are good. Note the calls to the parseStateDef near the beginning of the addTransformToList function. (I’m using the alert function as a placeholder. I would do something more elegant or “real” if I was going to release this code into the wild.)
|
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 96 97 |
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) { //parse pStart and pEnd to ensure they are valid if (!parseStateDef(pStart) || !parseStateDef(pEnd)) { alert("malformed parameter"); } 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; } |
The code that actually does the parsing and checking is here. For now I only test to see if the parameters are valid numbers, strings, or booleans. Everything else I don’t worry about for now. If the input value is a string I check to see if the first character is an open parenthesis, in which case it is sent off to the parseStringMultiple function to be broken into parts which are themselves tested separately.
|
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 |
function parseStringMultiple(state) { var len = state.length - 1; if ((state.charAt(0)) && (state.charAt(len))) { var s = state.substr(1,len-1); var arr = s.split(","); for (var i=0; i<arr.length; i++) { if (!parseStateDef(arr[i])) { return false; } } if (i > 1) { return true; } else { return false; } } else { return false; } } function parseStateDef(state) { var type = typeof state; if (type == "number") { return true; } else if (type == "string") { if (state.charAt(0) == "(") { if (parseStringMultiple(state)) { return true; } else { return false; } } else { return true; } } else if (type == "boolean") { return true; } else if (type == "symbol") { return false; } else if (type == "undefined") { return false; } else if (type == "object") { return false; } else if (type == "function") { return false; } } |
OK, if I don’t get sidetracked I should be able to stitch everything back together and make it run again tomorrow.