Lynda HTML5 For Flash Developers

So in this movie, I want to show you how you can go about animating DOM elements using JavaScript.

So I have my blank template here, and the first thing we need obviously is a DOM element to animate.

So I am just going to create a div, and I am going to do some in-line styles here, just

so we can actually see it.

So I am going to give it a width of 200 pixels, we'll give it a height of 200 pixels, we'll

give it a background color, and we'll make this background color blue, and save it.

Let's make sure we can actually see it here and now we can see our blue div element.

This is what we're going to be animating.

Now I've already included at the top, I'm importing that requestAnimationFrame shiv

that we created earlier, and we're going to use the requestAnimationFrame API to create our loop.

Up here in my JavaScript, I am going to create a few variables that we're going to need.

First, I am going to create a variable called dx, stands for destination x, and that's the

destination of where we want to animate to.

I am going to set it equal to 0 initially.

I am going to do the same thing for Y, that's destination Y.

Now like I mentioned in the previous movie, we can't set the left and the top properties

of our DOM elements just with a number.

We actually need to concatenate on this string, because of that, we're going to be animating

two kind of proxy properties; one called x and one called y, and then we're going to

use those values to actually set the top and left styles.

So I have those properties.

Now I also need a variable which is going to hold a reference to our div and I am just

going to call it d.

And actually down in the div, I need to give this an ID, and I am just going to give it an ID of box.

So now in my init function, what I am going to first do is to get a reference to that

div and I already created that variable called d.

And to get that, I am going to say document.getElementById("box").

That's going to store a reference to that box in that variable d.

Now we're going to make this box animate to random positions on our page.

So what I am going to do is with that dx, and dy variables, I am going to create a random

value for each of those.

So I am going to say dx is equal to, and we're going to use the Math.random

function, which again is the same in JavaScript as it is in Flash.

I am going to multiply that by 800.

This will give me a random number between 0 and 800.

I am going to do the same thing for the y property. So Math.random()*800.

So now I have these random values for destination x and destination Y.

Now I am going to call our loop function, which we haven't created yet, but I am just

going to call it loop, and we're going to call it and now, let's go ahead and create that.

So function loop, and again, we're going to use the requestAnimationFrame API to have

this be called repetitively.

So I am going to say requestAnimationFrame, and we're going to have it call this loop

function on every frame.

So now what I want to do is I want to animate this x, and y property, and I want to use

easing animation so that on every frame, it's getting closer and closer to the destination

x and destination y.

Well this is going to be typical Flash style easing code you're probably used to doing.

So we're going to say X and we're going to add value to that on every frame, and the