Corona – frame based animation

Transitions work well for situations when you want a motion to run from start to finish with a set length of time. For example you’d like to have en element move onto the page and stop in the center over 3 seconds. At other times you’ll want to create a motion that plays continuously. For example, you have object that moves back and forth across the screen for as long as it is on the screen. In these cases transition.to() doesn’t work so well. For these situations we can use the “enterFrame” event.

The enterFrame event

The enterFrame event is an event that us dispatched once every frame. Which of course brings up the idea of frames. Think of frames as the number of times Corona updates the screen. This is typically 30 times per second. So the enterFrame event is an event that is sent 30 times per second.

You can use the enterFrame event to do lots of things. A common purpose is animation. Imagine you had a object on the screen you added 12 degrees to it’s rotation 30 times each second. It would make a complete rotation every second.

Test the enterFrame event

Create a new Corona project

1. Make a folder to work in
2. Create a new text file and save into the folder with the name main.lua
3. Copy a small image into your folder

In your main.lua file add the following code.

-- Make a new image
local invader = display.newImage("invader_04.png")

-- Position the image at a starting location off the left edge of the screen
invader.x = -80
invader.y = 160

-- Use this function move the image, this function will be run once each frame
-- each frame add 5 to the x. If x is greater than 400 move the image to the left
local function move(event)
 invader.x = invader.x + 5
 if invader.x > 400 then
 invader.x = -80
 end
end

-- Add an enterFrame event to the Runtime object
Runtime:addEventListener( "enterFrame", move )