The last subject I wanted to explore was animation effects, which is to say defining tweens that proceed from beginning to end in a fashion that is other than linear, which is the default I’ve been using to this point. The tweens are defined using the addTransformToList function, as shown in multiple instances below.
|
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"); |
If, instead of defining a linear tween, we wanted to define one that behaved differently, we’d have to provide an alternate string or object literal. The information would have to include as many parameters as required to govern the desired effect. Here’s one I did for an animation on one of my intro pages; it simply specifies a string and the details are hard-coded in the tween function (in this case a bcDefineLeftTween function).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
for (var i=alpha; i<=omega; i++) { //> s = sElement+".style.left='"+Math.round(left)+"px';" bcActivitiesList[i][0] = bcActivitiesList[i].push(s); if (mMethod == "linear") { left += increment; } else if (mMethod == "vibrate_right") { var multiplier = i - alpha - (Math.PI*0.5); multiplier *= 0.3; 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; } } |
The idea is that the element would start in a given spot, get kicked to the right by some specified amplitude, vibrate back to the original position in a sine wave pattern, with a vibration having a specified period, and with a specified decay (during which the vibration gets smaller and smaller). I used parameters to govern the amplitude (the 100.0, in pixels), period (the 0.3, modifying the cumulative angle), and decay (the (omega-i) / (omega-alpha) term) so I might define an object literal of the form:
|
1 |
{effect: "vibrate_right", freq: 0.3, amplitude: 100.0, decay: "linear"} |
If I wanted the vibrate starting to the left I would just change the sign of the last term in the first line of the relevant block like this:
|
1 |
var multiplier = i - alpha + (Math.PI*0.5); |
This would make the tween start in the original location but as the quantity i – alpha began to increase the cosine value would first go negative instead of positive.
The tween definitions here aren’t bad but we’d certainly want to implement something more modular. We wouldn’t want to have to embed all that specialized code in each function that defines a tween, we’d probably want to use a functional parameter that gets its parameters set in one place, then is called in the tween function using a standard-looking interface that takes only the alpha, omega, and i values as inputs. Any other method would involve too much duplication of code.
If you are wondering, this is implemented in the Greensock product in a very powerful way. They’ve created a page which lets you see how it all works in detail, here. As I’ve stated before, the folks who’ve created this product have done such a nice job with it, and their licensing terms are so easy, that it would be crazy to try to reverse-engineer or duplicate the whole thing.
One type of effect I do want to create involves simulating gravity, so that when you give an element an initial velocity moving upward, a downward velocity increment is added during every animation step. Combined with a modest leftward or rightward movement, an object can be made to “fly” in a natural-looking arc. A bunch of objects animated together in this way could be made to look like a fountain of sorts. See here (the effect starts about halfway through the title animation) for the inspiration for this exercise, which will begin next week.