Today I added the capability of adding a rotation tween, which I applied to a fourth element at the end of the previous animation. The tween definition is here:
|
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 |
function bcDefineRotateTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) { var s = sElement+".style.transform='rotate("+pStart+"deg)';"; var alpha = Math.round(tBegin * 60.0); var steps = Math.round(tDuration * 60.0); var omega = alpha + steps; var increment = (pEnd - pStart) / steps; var angle = 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.transform='rotate("+angle+"deg)';"; bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; if (mMethod == "linear") { angle += increment; } } for (i=omega+1; i<=bcFinalActivity; i++) { bcActivitiesList[i][0] = index+1; bcActivitiesList[i][index] = s; } bcClearChainFlag(); } |
Here’s the code added to handle rotations in the addTransformToList function. The only interesting bit is ensuring the default starting value is properly initialized.
|
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 |
if (keyList[ii] == "left") { pStart = parseFloat(element.style.left); pEnd = pStart + parseFloat(trans.left); } else if (keyList[ii] == "top") { pStart = parseFloat(element.style.top); pEnd = pStart + parseFloat(trans.top); } else if (keyList[ii] == "opacity") { pStart = parseFloat(element.style.opacity); pEnd = pStart + parseFloat(trans.opacity); } else if (keyList[ii] == "display") { pStart = element.style.display; pEnd = trans.display; } else if (keyList[ii] == "scale") { var temp = element.style.transform; var locStart = temp.search("scale"); var temp1 = temp.substr(locStart); var locEnd = temp1.indexOf("\)"); pStart = temp1.substr(5,locEnd-(5-1)); pEnd = trans.scale; } else if (keyList[ii] == "rotate") { var temp = element.style.transform; var locStart = temp.search("rotate"); var temp1 = temp.substr(locStart); var locEnd = temp1.indexOf("\)"); pStart = temp1.substr(5,locEnd-(5-1)); if (pStart == "") { pStart = 0; } else { pStart = parseFloat(pStart); } pEnd = parseFloat(trans.rotate); } |
Here are the initializations for the elements and animations.
|
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 |
var handle001 = document.getElementById("handle001"); bcInitElement(handle001,"301px","50px","red","rgba(0,0,0,0)","260px",0,"block","This line slides in, out, in"); addTransformToList("handle001:1",0.75,{left:-284, opacity:1.0}); addTransformToList("handle001",0.50,{left:284}); addTransformToList("handle001:2",0.75,{left:-284}); addTransformToList("handle001",0.00,{display:"none"}); 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",0.75,{top:150, opacity:1.0},"linear","handle001:1-=0.25"); addTransformToList("handle002",0.00,{display:"none"},"","handle001:2"); 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 = "rotate(45deg) scale(0.5,0.5)"; //handle003.style.transform = "rotate(45deg)"; handle003.style.transform = "scale(0.5,0.5)"; addTransformToList("handle003",0.05,{opacity:1.0},"linear","handle001:2-=0.05"); addTransformToList("handle003",1.50,{scale:"(2.0,2.0)"},"linear","+=0.50"); addTransformToList("handle003",0.00,{display:"none"}); var handle004 = document.getElementById("handle004"); bcInitElement(handle004,"80px","70px","orange","rgba(0,0,0,0)","140px",0,"block","This text rotates into place"); addTransformToList("handle004",1.00,{opacity:1.0}); addTransformToList("handle004",1.00,{rotate:"-360"},"linear","-=1.00"); |
The animation works as expected.