maintainable.
Notice that, to produce the randomized values, this section of code leverages our r
helper function that was defined in Animation setup. (As a reminder, the r function
returns a randomized integer value constrained by its min and max arguments.) You’ll
learn more about this function momentarily.
Opacity animation
The opacity property animates from and toward randomized values. In the case of the
starting value, you’re giving the randomized value a slight boost to ensure that the
elements are never too close to being invisible—after all, you want the viewer to see what
you’re animating! The animation of opacity results in a smattering of circles all over
the page that have varying opacities from the very first frame. Differentiated opacities
create a nice gradient effect that adds visual richness to the demo.
This code takes advantage of force-feeding for a purpose other than performance
optimization: value functions are being force-fed to dynamically generate start values for
the elements that have yet to be inserted into the DOM, which means that you’re
successfully avoiding writing an entirely new code block just to set the initial CSS states
of the circle elements. You’re dynamically providing unique starting positions in the same
line of code responsible for animating those positions. As discussed thoroughly in Chapter
4 , “Animation Workflow,” you should strive for this level of expressiveness in all of your
animation code.
Translation animation
For easy reference, here’s this section’s code once again:
Click here to view code image
/
Circle animation
/
$circles
.appendTo($container)
.velocity({
opacity: [
function() { return Math.random() },
function() { return Math.random() + 0.1 }
],
translateX: [
function() { return “+=” + r(-screenWidth/2.5, screenWidth/2.5) },
function() { return r(0, screenWidth) }
],
translateY: [
function() { return “+=” + r(-screenHeight/2.75, screenHeight/2.75)
},
function() { return r(0, screenHeight) }
],
translateZ: [
function() { return “+=” + r(translateZMin, translateZMax) },
function() { return r(translateZMin, translateZMax) }
]
}, { duration: 6000 })