Corona provides a simple solution to making things move. The best way to learn is try it for yourself.
Start by creating a folder for your new project. Create a new text file and save it your folder as main.lua. Add an image to your folder. make this image something small, about 100 px by 100 px.
In main.lua add the following code to get the image to show up on the screen.
local square = display.newImage("square.png")
Test your project at this point to make sure your image shows. The image should appear in the upper left of the screen.
Transition
Now add a transition. Add the following code below the code from above.
transition.to( square, {time=3000, x=160, y=240} )
Test your project. The image should move to the center of the screen over 3 seconds. Note, the motion has a constant speed. The object neither speeds up or slows down from the beginning to the end of the motion.
The transition “to” method takes two parameters. The first is the reference to the object that will be animated. In my case I used the variable square. Second is a “table” containing properties that describe the motion.
Note: Lua uses “tables” which are similar to Arrays and Objects in other languages. Though, the syntax is different!
The table I created above {time=3000, x=160, y=240} contains three properties: time, x and y. Notice the table is defined with the {}. Each property and value pair is separated by a comma. Each property and value has an = between the two.
The time property sets the length of the motion. This is set in milliseconds. There 1000 milliseconds in every second. The motion above would last 3 seconds.
The x and y properties animate the x and y properties of the display object, square. You can animate any properties using transition.to. Try animating the rotation property.
transition.to( square, {time=3000, x=160, y=240, rotation=360} )
Test again, this time the image rotates a full 360 degrees while moves to the center of the screen.
Preset properties
Imagine you wanted the box to move on to the stage from outside the edge of the stage. In this case you’d want to set the position of the object to it’s starting location before calling transtion.to().Try adding the following line before transition.to()
square.x = -100 square.y = -100
Test your project again. This time object moves into view from the upper left. Since x of 0 is the left edge of the stage and y of 0 is the top edge of the stage, negative x values place the object off the edge of the stage to the left. While negative y values would place the object off the top edge of the stage.
Other properties
Try experimenting with these properties.
- alpha – Sets the transparency of the object. Use a range of 0 (transparent) to 1 (opaque).
- xScale – Sets the horizontal scale. A value of 2 would make the object twice it’s original size.
- yScale – Sets the vertical scale.
Easing
Obviously the default linear easing is not very exciting. Corona provides a few easing methods.
- easing.inExpo( ) – speed up
- easing.inOutExpo( ) – speeds up and slows down
- easing.inOutQuad( )
- easing.inQuad( )
- easing.linear( )
- easing.outExpo( )
- easing.outQuad( )
Use these in conjunction with the transition property in the table when calling transition.to(). For example:
transition.to(square, {time=3000, x=160, y=240, rotation=360, transition=easing.outExpo} )
This time the image starts of fast and slows to a stop at the end of it’s motion.