Today I’m adding two new types of tweens, but once this is done the method for doing subsequent ones should be pretty clear.
The first type is for hiding elements using the display property. This is useful for longer animations where older elements must be hidden so new ones can be seen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function bcDefineHideTween(sElement,tBegin) { var s = sElement+".style.display='block';" if (!bcChainFlag) { bcInitializations[0][0] = bcInitializations[0].push(s); } bcClearChainFlag(); var alpha = tBegin * 60.0; if (alpha > 0) { bcActivitiesList[alpha-1][0] = bcActivitiesList[alpha-1].push(s); } s = sElement+".style.display='none';"; bcActivitiesList[alpha][0] = bcActivitiesList[alpha].push(s); if (alpha > bcFinalActivity) { bcFinalActivity = alpha; } } |
The second type is for changing the scale using the transform property. This is interesting because I’ve chosen a form that takes two parameters rather than just one. Note that the scale function works by applying the operation from the center of the affected element. The element being scaled appears to stay in the same location while all edges of the element move to or away from the center in the same proportion along both the the x- and y-axes. The scaling factor for each axis is specified separately but the x-axis factor changes the right and left edges simultaneously while the y-axis factor changes the top and bottom edges simultaneously. If you want the scaling to appear to be based on another location you’ll have to add offsetting animations to the top and left properties of the element. Finally, if the initial scale for an element is anything other than one, then an extra scale command has to be issued to do so. See the example below for how this can be done.
|
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 |
function bcDefineScaleTween(sElement,pStartX,pStartY,pEndX,pEndY,tBegin,tDuration,mMethod) { var s = sElement+".style.transform = 'scale("+pStartX+","+pStartY+")';" if (!bcChainFlag) { bcInitializations[0][0] = bcInitializations[0].push(s); } bcClearChainFlag(); 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; if (alpha > 0) { bcActivitiesList[alpha-1][0] = bcActivitiesList[alpha-1].push(s); } for (var i=alpha; i<=omega; i++) { //> s = sElement+".style.transform = 'scale("+scaleX+","+scaleY+")';" bcActivitiesList[i][0] = bcActivitiesList[i].push(s); if (mMethod == "linear") { scaleX += incrementX; scaleY += incrementY; } } bcInitializations[1][0] = bcInitializations[1].push(s); if (omega > bcFinalActivity) { bcFinalActivity = omega; } |
Here’s an updated animation that uses the three new types of tweens we’ve added.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var handle001 = document.getElementById("handle001"); bcInitElement(handle001,"201px","50px","red","rgba(0,0,0,0)","260px",0,"block","This line slides in from the side"); 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"); 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)"; 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"); |