Transitions

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

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

    Syntax: handle = transition.to( target, params )

  • transition.from(): It is similar to transition.to() except 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.

    Syntax: handle = transition.from( target, params )

    The parameters used are:

    target- A display object that will be the target of the transition.

    params- 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: It specifies the duration of the transition in milliseconds. By default, the duration is 500 ms (0.5 seconds).
    • params.transition: It is by default easing.linear.
    • params.delay: It specifies the delay, in milliseconds, (none by default) before the tween begins.
    • params.delta: It is a boolean specifying whether non-control parameters are interpreted as final ending values or as changes in value. The default is nil meaning false.
    • params.onStart: It is a function or table listener called before the tween begins.
    • params.onComplete: It is a function or table listener called after the tween completes.

For example:

_W = display.contentWidth
_H = display.contentHeight

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

local square2 = display.newRect( 0, 0, 50, 50 )
square2:setFillColor( 255,255,255 )
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. The square display object from it's current position 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 it's initial location in 1500 milliseconds.

上一章目录下一章