×
A new build of Corona SDK is now available to subscribers. Not a subscriber? Subscribe now.
Corona 2019.3528 | Released: 22 Sep 2019, 2:57am | What's New | Download Now

transition.to( )

Description:

Animates a display object's properties over time using the "easing" transitions.

Syntax:

handle = transition.to( target, params )

Example:

local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.stageWidth, display.stageHeight
 
local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.stageWidth, display.stageHeight
 
local listener1 = function( obj )
        print( "Transition 1 completed on object: " .. tostring( obj ) )
end
 
local listener2 = function( obj )
        print( "Transition 2 completed on object: " .. tostring( obj ) )
end
 
-- (1) move square to bottom right corner; subtract half side-length
--     b/c the local origin is at the square's center; fade out square
transition.to( square, { time=1500, alpha=0, x=(w-50), y=(h-50), onComplete=listener1 } )
 
-- (2) fade square back in after 2.5 seconds
transition.to( square, { time=500, delay=2500, alpha=1.0, onComplete=listener2 } )

Parameters:

target
Object: A display object that will be the target of the transition.

param
Table: 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 specifies the duration of the transition in milliseconds. By default, the duration is 500 ms (0.5 seconds).
  • params.transition is by default easing.linear . See Easing for more functions.
  • params.delay specifies the delay, in milliseconds, (none by default) before the tween begins.
  • params.delta 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 is a function or table listener called before the tween begins. Table listeners must have an onStart method. When invoked, the listener is given target instead of an event.
  • params.onComplete is a function or table listener called after the tween completes. The listener is sent an "obj" parameter that points to the "target" used in the transition.

Most of the Display Object Common Properties can be used as part of the transition parameters. http://developer.anscamobile.com/reference/index/common-properties

Returns:

handle
A reference to the new transition (used by transition.cancel) to cancel the transition.

Remarks:

The transition timer is updated every frame count (30 or 60 FPS). Specifying a time faster than the frame count (33 ms. or 16 ms.) will default to the frame rate time.

Note: There is currently a timing bug in this API when invoked from a timer.performWithDelay listener. The bug will generate a warning message then trying to transition the Alpha property of an object from 1.0 to 0.0 or 0.0 to 1.0.

The work-around to eliminate the warning message is to add the "delay = 1" parameter as in this example:

transition.to( square, { delay=1, time=500, alpha=0.0, onComplete=listener2 } )

This is FB case# 1041. This bug has been fixed starting in build 484

Supported on operating systems and platforms for build numbers shown:
  • Mac OS X:
    Corona SDK 1.0
  • Windows:
    Corona SDK 2.0
  • iOS:
    Corona SDK 1.0
  • Android:
    Corona SDK 2.0

Replies

aleeri
User offline. Last seen 6 years 33 weeks ago. Offline
Joined: 25 Nov 2010

Hey here is a quick example (with all the params I know):

1
local myTween = transition.to(myGfxObject, {time=1000,  x=100, y=100, xScale = 0.5, yScale = 0.5, rotation = 45, alpha=0.5, transition=easing.inOutExpo, onComplete=myCallbackFunction})

myGfxObject can also be a displayGroup.
The call returns you a handle to the transition which you can use like:

1
if myTween then transition.cancel(myTween) end

but don't use it for polling if the tween is complete. Use the callback function for that (If you use classes n objects you have to pass self here and implement the function onComplete(event))

Cheers!
Alex

coderebelbase
User offline. Last seen 2 years 45 weeks ago. Offline
Joined: 1 Feb 2010

Shouldn't there be an onUpdate event?

Janos
User offline. Last seen 6 years 22 weeks ago. Offline
Joined: 12 May 2011

I think there is another bug here...

1
transition.to( square, { time=500, delay=2500, alpha=1.0, onComplete=listener2 } )

This is going to call the listener2 function on completion, after 3000ms.
But if you are trying to pass a variable e.g.

1
transition.to( square, { time=500, delay=2500, alpha=1.0, onComplete=moveLeft(x) } )

then it will be called at the time when transition command runs (i.e. 0ms).

Tom
User offline. Last seen 3 years 2 weeks ago. Offline
Joined: 13 Jul 2010

This is not a bug but a misunderstanding of how Lua works. When you use "onComplete=moveLeft", you are passing the address of "moveLeft" function. When you use "onComplet=moveLeft(x)", it will call the function and use the returned result as the function to call when the transition completes. You can't directly pass a parameter to the listener function, but you could use Lua closures to perform that task. See this blog article for more information:
http://blog.anscamobile.com/2011/02/using-closures-in-lua-to-avoid-global-variables-for-callbacks/

Janos
User offline. Last seen 6 years 22 weeks ago. Offline
Joined: 12 May 2011

Great, many thanks Tom!

vitalyx
User offline. Last seen 6 years 14 weeks ago. Offline
Joined: 11 Apr 2011

Guys, the bug with alpha (described in remarks) is there again. Tested on Windows simulator build 2011.602

KenRogoway
User offline. Last seen 3 years 3 weeks ago. Offline
Joined: 17 Jan 2011

How can you use this and get around forward referencing?

I have an init function that sets all the transitions, and onComplete I want to restart them all.

I cannot do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
local function creditsCompleted( obj )
    if obj == creditText[1].group then
        -- Time to restart the credits
        init()
    end
end
 
local function init()
  for i=1,#creditText do
    creditText[i].group.x = creditText[i].x
    creditText[i].group.y = creditText[i].y
    transition.to( creditText[i].group, { time=10000, y=(math.floor(creditText[i].y-(startingY+240)*kScaleY)), onComplete=creditsCompleted } )
end

The reason it doesn't work is that init() is a forward reference. No doubt someone will say, move init() before the onComplete function, but that doesn't work either because then the creditsCompleted function is a forward reference.

How can I get around this limitation?

KenRogoway
User offline. Last seen 3 years 3 weeks ago. Offline
Joined: 17 Jan 2011

I was able to figure it out and thought I would share it with other people who run into the same issue.

Two changes are required. One is you must use the equivalent of an explicit forward declaration (http://www.lua.org/pil/6.2.html)

The second change was to remove the "local" keyword from the function definitions.

Here is the working version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    local initTransitions, creditsCompleted
        
    function creditsCompleted( obj )
        if ( obj == creditText[1].group ) then
            initTransitions()
        end
    end
        
    function initTransitions()
        for i=1,#creditText do
            creditText[i].group.x = creditText[i].x
            creditText[i].group.y = creditText[i].y
            transition.to( creditText[i].group, { time=10000, y=(math.floor(creditText[i].y-(startingY+240)*kScaleY)), onComplete=creditsCompleted } )
        end
    end

protonreactor
User offline. Last seen 7 years 51 weeks ago. Offline
Joined: 23 Mar 2011

1
2
3
4
5
6
7
8
local init
 
-- code --
 
init = function(event)
 
 
end

KenRogoway
User offline. Last seen 3 years 3 weeks ago. Offline
Joined: 17 Jan 2011

Thanks protonreactor, if you look at my prior post I figured this out, but I appreciate the post.

duneunit
User offline. Last seen 4 years 28 weeks ago. Offline
Joined: 31 Oct 2010

Vitalyx is right. This bug is back and I am using 2011.591. Show up in Mac Sim and Devices. In the remarks it seems to suggest this occurs when calling a transition from a timer.performWithDelay() command... but I find this happening with transitions without any timer.performWithDelay() use. The delay=1 work around still works tho.

Also, I think I am seeing a bug with x/y positioning values, not just alpha transitions.

personalnadir
User offline. Last seen 5 years 41 weeks ago. Offline
Joined: 24 Nov 2010

Is it possible to write your own easing functions?

dca1505
User offline. Last seen 7 years 27 weeks ago. Offline
Joined: 8 Mar 2012

From the original example code provided, I am wondering:

- For the first time the user open the device, how to time the object to wait(idle) for 10 seconds or more before starting to move downwards ?

- Once the rectangular object drops to the bottom, is it possible for the same object to disappear at the same time from the top? the bottom remains visible...how would the code like?

- And If i want to drag the same object back to the same position (with mouse), how to write the code?

thank you in advance!

tmbrye
User offline. Last seen 3 years 11 weeks ago. Offline
Joined: 19 Jan 2011

@personalnadir

I found this link using the search box...give it a look.

http://developer.anscamobile.com/code/more-easing

Edissey
User offline. Last seen 40 weeks 3 days ago. Offline
Joined: 16 Nov 2011

Another bug I believe in transition.to. This relates to positioning masks in a runtime listener.

My app displays panels that can be swiped left or right. Each panel is a group of images. I masks to make new panels appear from either the left or right out of nowhere and for the currently displayed panel to disappear at the same time.

I use transition.to with easing.outExpo (although I also tried linear and got the same results I am describing) to complete the the panel movement after removing the touch and a runtime listener to position the masks.

What happens is very strange, when I move the the left the masks seem to track the panel group and the illusion works. When I move to the right the mask jumps to the right apparently by the same amount as the x translation produced by transition.to and that's where it stays until the transition completes. This occurs even though an examination of the maskX attribute and all the other attributes are correct. The resulting visual looks bad - it's as if the "curtain" moves to the right instead of staying in place. To correct an earlier post - this does happen with movement to the left as well.

I used the sample slideview.lua code as my starting point.

These are the functions I am using.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
-- this is the runtime listener
local function maskPanels()
 
-- currentPanel.x always starts at 0 so wherever it is is the current delta
  absoluteDelta = currentPanel.x
  if absoluteDelta < 0 then
    currentPanel.maskX = -panelWidth*0.5 - absoluteDelta
    nextPanel.maskX = -panelWidth*0.5 - absoluteDelta
  elseif absoluteDelta >= 0 then        -- Moved to the right
    currentPanel.maskX = panelWidth*0.5 - absoluteDelta
    previousPanel.maskX = panelWidth*0.5 - absoluteDelta
  end
end
 
-- This is the routine that causes the mask to "jump" after the touch -- is removed and incorrectly repositions the mask to the right.
local function moveRight()
 
  direction = "Right"
  currentPanelNo = currentPanelNo > 1
    and currentPanelNo - 1
    or numPanels
 
  transition.to( currentPanel, {time=SLIDESPEED, x = panelWidth +  panelPad, transition=easing.outExpo } )
  transition.to( previousPanel, {time=SLIDESPEED, x = 0, transition=easing.outExpo, onComplete=positionPanels } )
 
end
 
-- This routine has the same problem as the moveRight() function
 
local function moveLeft()
 
  direction = "Left"
  currentPanelNo = currentPanelNo < numPanels
    and currentPanelNo + 1
    or 1
 
  transition.to( currentPanel, {time=SLIDESPEED, x = -panelWidth - panelPad, transition=easing.outExpo } )
  transition.to( nextPanel, {time=SLIDESPEED, x = 0,   transition=easing.outExpo, onComplete=positionPanels } )
 
end

dittophantassy
User offline. Last seen 3 years 11 weeks ago. Offline
Joined: 17 May 2012

It would be useful to have an onCancel parameter, that is called when the transition is canceled.