Transitions

In this chapter, we'll be touching base with transition.to() and transition.from():

• transition.to(): This animates a display object's properties over time using the easing transitions.

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

• transition.from(): This is similar to transition.to() except that the starting property values are specified in the function's parameter table, and the final values are the corresponding property values in the target prior to the call. The syntax is handle = transition.from( target, params ).

  The parameters used are as follows:

  • target: This is a display object that will be the target of the transition.
  • 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: This is by default 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 table listener that is called before the tween begins.
    • params.onComplete: This is a function or a table listener that is called after the tween completes.

For example:

_W = display.contentWidth
_H = display.contentHeight

local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 1, 1, 1 )
square.x = _W/2; square.y = _H/2

local square2 = display.newRect( 0, 0, 50, 50 )
square2:setFillColor( 1, 1, 1 )
square2.x = _W/2; square2.y = _H/2

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

The preceding example shows how two display objects transition throughout the space on a device screen. From its current position, the square display object will move to a new location of x = 250 and y = 400 in 1500 milliseconds. The square2 display object will transition from x = 275 and y = 0 to its initial location in 1500 milliseconds.