transition2: Extending Corona's transition library with custom transitions

Corona Labs has a great transition library that makes it very easy to perform some useful and common transitions on display objects, such as moving, scaling and rotating them. There are also plenty of different easing algorithms to choose from that affect the behavior of the transition effects. I've used this library a lot and I really like its ease of use.

But there are certain things that you can't do with the transition library. One of them is to modify the fill and stroke colors of a display object to be able to fade smoothly from one color into another.

UPDATE June 30, 2017: transition2 is now a full standalone rewrite of Corona's transition library. Not just an extension that wraps the transition library like the remaining text in this post suggests.

I needed a color transition effect for Ice Trap to make some glowing image borders but had a hard time finding any solution that I felt comfortable in using, so I started rolling my own. To make a long story short it was such an exciting programming problem to solve that I started out with a small color transition hack and ended up with my own extensible transition library: transition2.

transition2 wraps the original transition library and decorates it with some new functions to provide additional transitions, for example a color() function for the color fading effect. Functions from the original transition library such as transition.to() are not affected at all, but can be used in combination with transitions from transition2. The few new transition functions that I've created so far don't really warrant a library by themselves, but what I hope will make transition2 particularly useful is the possibility for anyone to easily extend it with custom transition functions.

Before we move on to some examples, here's a few key notes on how transition2 works and what you can do with it:

•  transition2 mimics the behavior of the orginal transition library, for example by providing the same cancel(), pause() and resume() functionality. Each of these functions accepts an optional single parameter which can be either a transition reference, a target object or a tag name. No param will affect all transitions.


• transition2 functions accept the same general parameters as the transition functions, e.g. time, delay, onComplete etcetera.


• Existing easing algorithms can be utilized just like you're used to when setting the transition param, e.g. transition = easing.inSine.


• transition2 extension functions are created by implementing a Lua "interface" with a few simple functions. These extensions are then injected into a main algorithm that handles the core logic.


• Convenience functions can easily be created by hard coding some parameters for existing transition2 functions, for example a glow() function that hard-wires some params for the color() transition.


• The cancelWhen param (function) allows transitions to be automatically cancelled when some conditions are no longer fulfilled. A common example is to check if a display object has been removed.


• Every transition can be turned into a full cycle (start -> end -> start) just by setting the param reverse=true. In combination with this, a different easing algorithm can be used for the reversed part of the transition cycle by setting the transitionReverse param to an easing function.


• A couple of new callback functions are introduced to allow for better control over multi-iteration transitions: onIterationStart and onIterationComplete. Both of these functions receives params as a seconds parameter which makes it possible to change a transition's behavior between iterations.


• To switch from transition to transition2 in your code, just require transition2 into a local variable like this: local transition = require("transition2")

Ok, now on to some hands-on examples. We can apply the glow() effect to an image like this:

local transition = require("transition2")

local white = {1, 1, 1, 1}
local orange = {1, 0.5, 0, 1}

transition.glow(coronaLogo, {
    startColor = white,
    endColor = orange,
    time = 1000,
})

transition2 glow effect

Or we can make the same image move along a couple of separate x/y sine wave patterns with the moveSine() function:

transition.moveSine(coronaLogo, {
    radiusY = 500,
    time = 5000,
    iterations = 0,
})
transition.moveSine(coronaLogo, {
    radiusX = 150,
    time = 2500,
    iterations = 0,
})

transition2 moveSine effect

Or why not just combine glow() with bounce() and then apply some scaling and rotation using the original transition.to() function?

transition.glow(coronaLogo, {
    startColor = white,
    endColor = orange,
    time = 2000,
})
transition.bounce(coronaLogo, {
    height = display.contentHeight - 300,
    time = 2000,
    iterations = 0,
})
transition.to(coronaLogo, {
    rotation = 360,    
    time = 2000,
    iterations = 0,
})
transition.to(coronaLogo, {
    xScale = 2.5,    
    yScale = 2.5,    
    transition = easing.continuousLoop,
    time = 2000,
    iterations = 0,
})

Bounce, glow, scale, rotate! 

Hope you like what you've seen so far. If you want to know more you can check out more examples and get the full source code from the Github repo here: https://github.com/rannerboy/corona-transition2.

Please note that transition2 is work in progress. There might be bugs, performance can likely be improved, and the number of new transition functions to choose from is still very limited. If you feel like trying it out I'd be really happy for any feedback, especially in case you run into any bugs or other problems. And if you decide to implement your own custom transition function it would be awesome if you want to share it!

There's also this topic in the Corona forums where you can follow the progress of transition2, make feature requests, or just see what others have to say about it.

If transition2 turns out to be useful and stable I'll consider turning it into a Corona plugin, but for now you can just grab the source code from Github instead and include it into your Corona project.