Share Your Code

Improved Transition Function Calls

Posted by TimeSpaceMagic, Posted on June 24, 2012

GitHub URL: 
https://github.com/timespacemagic/coronaSDK/blob/master/tran.lua

I thought the current Corona transition methods are not exactly very customizable and has limited animation easings.

Furthermore:
1) You can't pause it easily. No pause ALL transition function either
2) There's a bug in the transition.from() method call if you enable delta = true

Solution:
I'll code the entire transition API from scratch. Using equations courtesy of Robert Penner that can be found at: http://www.robertpenner.com/easing/ , I've coded a brand new transition call.

Stuff to note:
1. Fixed the bug in the transition.from() call with delta enabled.

2. Waaaaay more animation easings you can now use. I've pretty much thrown in everything from Robert Penner.

3. Added a new type of listener called onFrac. This is a fractional listener that is called based on where you indicate during the duration. Use it as follows:
myTrans.to(obj,{xScale = 5,time=1000,onFrac={fraction=0.5,listener=callThis})
This means that the callThis listener will be called when the animation has reached the halfway mark. fractions above 1 will be ignored.

4. Added a .timeScale property to the transition handles. This means you can change the speed of the animation on the fly as long as you track the transition handle that is returned from the myTrans.to() and myTrans.from() calls.

5. No support for transition.dissolve() yet, and never will. Because you can just call two transition.to() handles for two separate objects. In fact I don't even understand why it exists in the Corona API.

6. There is a difference in specifying transition easings from the usual. Instead of
myTrans.to(obj,{x=50,transition=easing.inQuad)
now you specify the transitions with
myTrans.to(obj,{x=50,transition="inQuad")

7. Preview the easings at: http://www.robertpenner.com/easing/easing_demo.html Supported easings are:
"linear"
"inQuad"
"outQuad"
"inOutQuad"
"inCubic"
"outCubic"
"inOutCubic"
"inQuart"
"outQuart"
"inOutQuart"
"inQuint"
"outQuint"
"inOutQuint"
"inExpo"
"outExpo"
"inOutExpo"
"inSine"
"outSine"
"inOutSine"
"inCirc"
"outCirc"
"inOutCirc"
"inElastic"
"outElastic"
"inOutElastic"
"inBack"
"outBack"
"inOutBack"
"inBounce"
"outBounce"
"inOutBounce"

DISCLAIMER: I just coded this overnight and barely tested a few features. So far it SEEMs to work fine. If you guys find out any bugs and things that are not working as they should. Post it in the comments so that I can edit it later.


Replies

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

28th Jun 2012 - Added capability to handle missing objects.

Lerg
User offline. Last seen 1 day 4 hours ago. Offline
Joined: 8 May 2011

Thanks for easing functions. There is another module in code exchange with custom easings, but your is reacher and I hope without bugs.

As for transitions it should be mentioned that your code doesn't work with any parameter besides those that are hardcoded (few most popular). Like for example width, height, maskX, xReference or any custom parameter of your own won't work.
By the way, have you seen my timers and transitions module before making your own?

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

Hey you're right I left out width and height. Silly mistake. I kinda coded this out of frustration for my own application, so I left out stuff that I didn't have to use.

And no, I haven't seen your code. Drop me a link and I'll check it out. :)

Lerg
User offline. Last seen 1 day 4 hours ago. Offline
Joined: 8 May 2011

Here is it
http://developer.anscamobile.com/code/pausable-timers-and-transitions-speed-adjustment

Also I recommend not using module(..., package.seeall) since it's deprecated.

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

v1.0.2 - By reminder of Lerg above, I've added support for mask parameters:
maskX, maskY, maskScaleX, maskScaleY, maskRotation, width and height.

I've decided against adding in xReference, yReference, xOrigin and yOrigin because use of them in a transition is pretty obscure and the code is kinda bloated now with the mask parameters added in. If anyone is interested in using my transition functions for the omitted parameters, you could just copy paste the .alpha portions and replace it.

@Lerg I'm keeping the module(..., package.seeall) since there are still people using older builds of the simulator. Didn't know it was deprecated though. Nice to know.

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

Came across a bug while using my own library's outExpo easing. Missed out a minus sign. Fixed.

MustafaAlyousef
User offline. Last seen 22 hours 9 min ago. Offline
Joined: 5 May 2012

Thank you for sharing!

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

This is excellent!

You got into my Awesome Libraries Hall of Fame.

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

I'm pretty sure you don't need a new version of the simulator to use the 'public' module approach, instead of module(..., package.seeall).

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

Hey binc! Glad you liked it :)

I'm not sure how Corona works though. Does the Lua code compile server side? The module(..., package.seeall) was deprecated in Lua 5.2 so wouldn't earlier simulator builds using the older versions have a problem?

If it's server side compilation with regularly updated Lua versions then I guess it's redundant.

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

It worked for me, when I was using build 2011.704. I don't know what version of lua that was, but it worked.

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

Found a bug in using xScale and yScale parameters. I used obj:scale previously to scale objects, thinking it'd be more efficient. However it resets the object reference point each time the :scale method is called.

I've thus removed it and switched back to using assigning values directly to .xScale and yScale properties.

Anthony Keffel
User offline. Last seen 4 weeks 2 days ago. Offline
Joined: 10 Feb 2012

Hi - thank you very much for your great work and sharing it!

Just a small question:
how can I cancel a single transition?

Bye
Anthony

Panc software
User offline. Last seen 21 hours 7 min ago. Offline
Joined: 17 Mar 2012

I must be missing something because I can't get the elastic or bounce options to work. Has anyone been successful?

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

It works for me. That's one reason I like this library - all of the thousands of easing possibilities.

By the way, @Anthony Keffel: First you title it like this:

1
2
3
--Assuming you loaded it over the default transitions library:
local trans=transition.to(obj, {params})
transition.cancel(trans)

C

Panc software
User offline. Last seen 21 hours 7 min ago. Offline
Joined: 17 Mar 2012

This is the entirety of my code. I'm obviously doing something wrong. What am I missing?

1
2
3
4
5
6
require "tran"
transition = tran
cube=(display.newImageRect("cubetop.png",60,60))
cube.x = 500
cube.y = 500
tran.to(cube,{time = 1000, x=100,transition="InOutBounce"})

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

I see...

This is how I think you should do it:

1
2
3
4
5
6
local tran=require("tran")
transition=tran -- change the original transition library to this one
cube=(display.newImageRect("cubetop.png",60,60))
cube.x = 500
cube.y = 500
transition.to(cube,{time = 1000, x=100,transition="InOutBounce"})

That way, you are overwriting the original transition library with this one.

Hope this helps!
Caleb

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

1
2
3
4
5
6
7
8
9
10
11
12
Sorry for the late reply. When you call the transition.to() function, it returns a table as the specific transition handler. 
 
So:
local tran = require("ImprovedTransition")
 
local tranHandle = tran.to(obj,{time=100,x=50})
 
-- TO CANCEL
tran.cancel(tranHandle)
 
-- TO CANCEL ALL ONGOING TRANSITIONS
tran.cancelAll()

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

The transition easing naming conventions are in [small caps -> big caps for all subsequent words].

So In-Out Quad would be "inOutQuad". Anyway Caleb P is correct. Use my code as per how you would use the original Corona API. Just change the easing names from easing.Name() to "Name."

Panc software
User offline. Last seen 21 hours 7 min ago. Offline
Joined: 17 Mar 2012

The capitalization and localization were the issues. Thanks Caleb and TimeSpace!

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

Hey, TimeSpaceMagic!

Is there any way you can add the ability to transition anything? For example, the default transition built in can transition whatever you want it to - I believe it simply copies the params and increments them that way, instead of creating a flag for each.

I understand that would likely take a very long time to make, but you could try adding it into this library sometime in the future.

Thanks so much for this, too. It's my all-time favorite transition library, with all of the easing and the onFrac listener... Not to mention the functions for all transitions.

Caleb

TimeSpaceMagic
User offline. Last seen 1 year 29 weeks ago. Offline
Joined: 30 Nov 2011

Yes it is possible. The reason why I created a flag for everything was because, well... I was lazy and the idea came about at 1am in the morning. Haha. In fact, the params table that takes in the parameters is some kind of hash table that I can create a "for k,v in pairs(params) do" loop to just go through.

One of these days when I can find the time, I'll shorten the code. Glad you enjoy the code. :)

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

No pressure... Just thought perhaps you could be working on it.

Thanks yet again!

C

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

Found a bug!

Doing multiple transitions with delays doesn't work: it takes the position of the object at the start of the transition, instead of at the end of the delay - at least I think that's what happens.

Example:
If you put three transitions, one to go here, one to go there, and one to return to the original spot, with delays so that the transitions will execute at the end of the last one, it will transition each from the original point.

richard9
User offline. Last seen 20 hours 40 min ago. Offline
Joined: 28 Feb 2011

Hmm...I need to find a way to understand this code better.

Basically a bug for what it's worth, but some of the easing equations used go below zero, which is fine except that with .alpha that means spamming large numbers of Warnings to console. Not sure if apps can ship with warnings like that, or if it's even feasible to prevent below zero alpha the way the transition system works?

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

I believe you could simply add a simple clamp function and clamp it in the alpha code.

richard9
User offline. Last seen 20 hours 40 min ago. Offline
Joined: 28 Feb 2011

That's what I thought too; but as far as I can tell the code is using individual transitions with the easing math, so I'm not sure there is a way to clamp .alpha outside of using a Runtime listener to set alpha per frame, which seems a bit wasteful.

I'm also trying to sniff out the bug you mentioned about positioning but can't quite nail where it would happen yet.

Caleb P
User offline. Last seen 3 days 19 hours ago. Offline
Joined: 5 May 2012

@TimeSpaceMagic:
Any idea when you're going to implement the ability to transition anything? ETA? I'm finding myself having to go back on the default transition library more and more - and it's quite annoying to have to do. I really don't want to have to rig up some pause function for the default transitions, and as for easing and onFrac and all of that, I don't even want to think about it...

Caleb :)

ed_win
User offline. Last seen 1 year 15 weeks ago. Offline
Joined: 7 Aug 2012

Hello! How can i use timeScale property? a little show up would be great! thanks in advance!