Code section: Circle animation
This is where things start getting interesting. Let’s take a look the circle animation, in
which you’re simultaneously animating their X-, Y-, Z-axis translations individually.
You’re also animating their opacity.
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 })
.velocity(“reverse”, { easing: “easeOutQuad” })
.velocity({ opacity: 0 }, 2000);
Value functions
Unlike the static animation property values used in the previous section (for example, [
215, 50 ]), this section uses functions for property values: each property is force-fed
an array of start and end values that are dynamically produced by functions. Let’s briefly
explore these value functions, which are a unique feature of Velocity.
NoteRead more about value functions at VelocityJS.org/#valueFunctions.Value functions let you pass in functions as animation property values. These functions
trigger at run-time, and are called individually for each element animated in a set. In the
demo, the set in question is the circle divs contained within the $circles jQuery
element object. Consequently, each circle element property will be assigned its own
randomized value once the animation begins. The only other way to achieve
differentiation between animation properties in a set of elements is to animate the
elements separately by looping through them, which gets messy and performs badly. This
is the benefit of value functions—you keep dynamic animation code terse and