Today I shortened up the way transforms are specified. Rather than specify the type of transform and its explicit starting and ending values I combined the information using object literals. Here are the new specifications, each listed after the old way, which are commented out.
|
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 |
var handle001 = document.getElementById("handle001"); //bcInitElement(handle001,"301px","50px","red","rgba(0,0,0,0)","260px",1,"block","This line slides in, out, in"); bcInitElement(handle001,"301px","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:-284},0.00,0.75,"linear"); //addTransformToList("handle001","left",301,25,1.25,0.75,"linear"); addTransformToList("handle001",{left:-284},1.25,0.75,"linear"); //addTransformToList("handle001","left",25,301,0.75,0.50,"linear"); addTransformToList("handle001",{left:284},0.75,0.50,"linear"); //addTransformToList("handle001","opacity",0.0,1.0,0.0,0.75,"linear"); addTransformToList("handle001",{opacity:1.0},0.0,0.75,"linear"); //addTransformToList("handle001","display","block","none",2.00,0.00,""); addTransformToList("handle001",{display:"none"},2.00,0.00,""); var handle002 = document.getElementById("handle002"); bcInitElement(handle002,"17px","-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",{top:150},0.50,0.75,"linear"); //addTransformToList("handle002","opacity",0.0,1.0,0.50,0.75,"linear"); addTransformToList("handle002",{opacity:1.0},0.50,0.75,"linear"); //addTransformToList("handle002","display","block","none",2.00,0.00,""); addTransformToList("handle002",{display:"none"},2.00,0.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",{opacity:1.0},1.95,0.05,"linear"); //addTransformToList("handle003","scale","(1.0,1.0)","(2.0,2.0)",2.50,1.50,"linear"); addTransformToList("handle003",{scale:"(2.0,2.0)"},2.50,1.50,"linear"); |
The starting value in this method is determined by the current value of the relevant property for each element. Getting the starting value can be straightforward in some cases and more complex in others. You can obtain the left edge location of an element by looking at element.style.left. However, the return value for element.style.transform will be more complex. The code I’ve written so far works only for the scale property and only if that is the only property specified. If multiple transforms are to be applied to an element they all have to be specified on the same line, otherwise only the last transform specified will have any effect. I’ll work on improving that tomorrow.
The ending value is determined directly from the supplied parameter in some cases (display and scale, for now), but indirectly for the left, top, and opacity properties (again, for now). In the latter cases the specified parameter is treated as an increment rather than a target value. This is admittedly a bit quirky and I’m going to have to think about it some.
If several transformations are defined that modify the same property over time the starting value for transitions after the first one is based on the ending value of the previous transition in time. It is assumed that the user has specified subsequent transitions that don’t start until the previous ones have finished, so I haven’t taken much effort to prevent someone from specifying something that might not work as expected.
Even more interestingly, multiple transforms can be combined into a single object literal as follows, though of course they will occur over the same time span.
|
1 |
addTransformToList("handle001",{left:-284, opacity:1.0},0.00,0.75,"linear"); |
The animation should look exactly the same as it has previously, so that means that I haven’t broken anything obvious. I’ll go into more details about the parts of the code I changed tomorrow.