Custom transition parameter to shift the time

[DanyaPlaksin]

As I announced in this post it`s time to present a slightly customized transition library that provides a little bit more control over your transitions!

I ran into a problem that the library can’t run a transition as if it lasts for some time by the moment of displaying.

In case of linear transitions this is not a big deal, but when it comes to any non-linear transition huge trouble arises immediately – you just can’t proceed with transition in the way you need! All you can do is to define delay parameter (blue and green graphics) and precalculate some initial object’s parameter values (green graphic) and even after this object will change in different ways.

In my case, there was a need to initialize the scales of objects that approach the player from the horizon and grow up nonlinearly and which have to be between the player and the horizon when the scene appears and starts moving after appearing.

So I added a timeShift parameter to all transitions (except dissolve).

A short explanation of how the timeShift parameter behaves and interacts with the delay parameter in transition with duration T:

• if timeShift > 0 and delay is not defined or zero (or less than zero but I doubt that anyone does this) then transition begins with the value of the object’s properties that would have been reached by the object by time equals timeShift with an unmodified transition and lasts for T - timeShift ms;
• if both are defined and both > 0 then one calculation of object’s properties is performed, then it waits for delay ms, and then transition continues for T - timeShift ms. One calculation of property value is necessary since the object will be displaying idle for delay ms and must change its properties continuously. If omit this calculation then there will be an observable leap between the initial value and shifted;
• if timeShift < 0 then transition behaves as if delay is defined and equals |timeShift|;
• if both are defined and delay > 0 and timeShift < 0 then transition waits for delay + |timeShift| ms and then starts from the initial values of object’s property and lasts for T ms;
• if timeShift >= T then object will display as if transition already ends regardless of the delay definition.

Time-shifted transitions supports pausing.

Here is an example of using time-shifted transition:

local arr_r = {}
local count = 100
for i = 1, count do
	local r_i = display.newRect(W/(count+1) * i, H, W/(count+1), 20)
	r_i.anchorY = 1

	-- example of shifted transition with delay
	r_i.i = i
	transitionNew.scaleTo(r_i, {yScale = 10, time = 10000, timeShift = i * 10000/count, transition = easing.outInBounce, delay = 3000, onPause = function(obj) print("paused " .. obj.i) end})
	
	r_i:setFillColor(0, (i % 2 == 1 and 0 or 1), (i % 2 == 0 and 0 or 1))
	arr_r[#arr_r+1] = r_i
end

And the result (i cut off idle delay frames to go straight into the action):

As you might have noticed there is an onPause listener. To provide more natural behaviour onPause call was added in case if a time-shifted transition has delay>0. onPause called after one execution of object`s parameter recalculation which performs before delay. So there is some kind of pause happens.

These code changes will not affect any existing projects since the default value of timeShift is zero.

I don’t know if these changes will ever be part of the built-in library since pull request hangs out for nearly a year, but if you want, you can take the code from here (with fixed blinking already in it!!!).