Let's get everything moving

We have introduced transitions in Chapter 3, Building Our First Game – Breakout, and briefly touched base with it. Let's go into more detail.

Transitions

The transition library allows you to create animations with only a single line of code by allowing you to tween one or more properties of a display object. We have discussed the basics of transitions back in Chapter 3, Building Our First Game – Breakout.

This can be done through the transition.to method, which takes a display object and a table that contains the control parameters. The control parameters specify the duration of the animation and the final values of properties for the display object. The intermediate values for a property are determined by an optional easing function, which is also specified as a control parameter.

The transition.to() method animates a display object's properties over time, using the "easing" algorithm.

The syntax is handle = transition.to( target, params ).

The return function is an object. The parameters are as follows:

• target: This is an object that will be the target of the transition. This includes display objects.
• params: This is a table that specifies the properties of the display object, which will be animated, and one or more of the following optional non-animated properties:
  • params.time: This specifies the duration of the transition in milliseconds. By default, the duration is 500 ms (0.5 seconds).
  • params.transition: By default, this is easing.linear.
  • params.delay: This specifies the delay in milliseconds (none by default) before the tween begins.
  • params.delta: This is a Boolean that specifies whether non-control parameters are interpreted as final ending values or as changes in value. The default is nil, meaning false.
  • params.onStart: This is a function or a table listener called before the tween begins.
  • params.onComplete: This is a function or a table listener called after the tween completes.

Easing

The easing library is a collection of interpolation functions used by the transition library. One example is opening a drawer. The first movement at first is fast and then a slow precise movement before it stops. The following are some easing examples:

• easing.linear(t, tMax, start, delta): This defines a constant motion with no acceleration
• easing.inQuad(t, tMax, start, delta): This performs a quadratic interpolation of animated property values in a transition
• easing.outQuad(t, tMax, start, delta): This starts the motion quickly and then decelerates to zero velocity as it executes
• easing.inOutQuad(t, tMax, start, delta): This starts the animation from a zero velocity, accelerates, and then decelerates to zero velocity
• easing.inExpo(t, tMax, start, delta): This starts the motion from zero velocity and then accelerates as it executes
• easing.outExpo(t, tMax, start, delta): This starts the motion quickly and then decelerates to zero velocity as it executes
• easing.inOutExpo(t, tMax, start, delta): This starts the motion from zero velocity, accelerates, and then decelerates to zero velocity using an exponential easing equation

You can create your own easing function to interpolate between a start and a final value. The arguments of the function are defined as follows:

• t: This is the time in milliseconds since the transition started
• tMax: This is the duration of the transition
• start: This is the starting value
• delta: This is the change in value (final value = start + delta)

For example:

local square = display.newRect( 0, 0, 50, 50 )
square:setFillColor( 1,1,1 )
square.x = 50; square.y = 100

local square2 = display.newRect( 0, 0, 50, 50 )
square2:setFillColor( 1,1,1 )
square2.x = 50; square2.y = 300

transition.to( square, { time=1500, x=250, y=0 } )
transition.from( square2, { time=1500, x=250, y=0, transition = easing.outExpo } )