Transition.to circle path

Getting Started Newbie Questions
#1

Hi

how to I transition an object to complete a full circle?

my code so far, but is not competing the circle, my maths is out.

local R = 45 --radius

local t = 3000 —time

transition.to( card1, {time=t, y=centerY-2*R, transition=easing.inOutSine } )

transition.to( card1, {time=t*.5, x=centerX, transition=easing.outSine, onComplete=function()

    transition.to( card1,{ time=t*.5, x=centerX, transition=easing.inSine } )

end } )

Thank you

#2

https://www.youtube.com/watch?v=Q_jaQNGWDr0

If video doesn’t play, click YouTube button after reloading.

Probably NOT what you meant, but it does use transition and is a lot more flexible than what you’ve got above:

local function vecScale( x, y, s ) return x \*s, y \* s end local function angle2Vec( angle ) local screenAngle = math.rad( -(angle+90) ) return -math.cos( screenAngle ), math.sin( screenAngle ) end local function rotateAbout( obj, x, y, params ) x = x or display.contentCenterX y = y or display.contentCenterY params = params or {} local pathRadius = params.pathRadius or 50 obj.\_pathRot = params.startA or 0 local endA = params.endA or (obj.\_pathRot + 360 ) local time = params.time or 1000 local myEasing = params.myEasing or easing.linear -- Start at right position local vx,vy = angle2Vec( obj.\_pathRot ) vx,vy = vecScale( vx, vy, pathRadius ) obj.x = x + vx obj.y = y + vy obj.onComplete = function( self ) Runtime:removeEventListener( "enterFrame", self ) end obj.enterFrame = function ( self ) local vx,vy = angle2Vec( self.\_pathRot ) vx,vy = vecScale( vx, vy, pathRadius ) self.x = x + vx self.y = y + vy end Runtime:addEventListener( "enterFrame", obj ) transition.to( obj, { \_pathRot = endA, time = time, transition = myEasing, onComplete = obj } ) end

Try these options:

local tmp = display.newCircle( 0, 0, 5 ) --rotateAbout( tmp ) --rotateAbout( tmp, nil, nil, { time = 5000, myEasing = easing.outElastic } ) rotateAbout( tmp, nil, nil, { time = 2000, startA = 270, endA = 90, myEasing = easing.outBounce } )

More easings here: http://docs.coronalabs.com/daily/api/library/easing/index.html

#3

Perfect exactly what I needed, and works great cheers

#4

Great snippet !

Would it be possible to pause/resume this path ?

#5

Sure,

You’d just need to use the transition pause/resume functions:

http://docs.coronalabs.com/daily/api/library/transition/pause.html

http://docs.coronalabs.com/daily/api/library/transition/resume.html

local tmp = display.newCircle( 0, 0, 5 ) transition.pause( tmp ) timer.performWithDelay( 1000, function() transition.resume( tmp ) end ) timer.performWithDelay( 1500, function() transition.pause( tmp ) end ) timer.performWithDelay( 2000, function() transition.resume( tmp ) end )

Tip: You can also modify my example and add a delay parameter to the function which you can then pass to the transition call.  That would also be useful.

#6

Thx for your response :slight_smile:

#7

Sorry to bother but I really enjoy your code !

I wonder if it’s possible to add the option for differents ending and beginning pathRadius.

That would extend your snippet to do elliptic transition.

#8

https://www.youtube.com/watch?v=Q_jaQNGWDr0

If video doesn’t play, click YouTube button after reloading.

Probably NOT what you meant, but it does use transition and is a lot more flexible than what you’ve got above:

local function vecScale( x, y, s ) return x \*s, y \* s end local function angle2Vec( angle ) local screenAngle = math.rad( -(angle+90) ) return -math.cos( screenAngle ), math.sin( screenAngle ) end local function rotateAbout( obj, x, y, params ) x = x or display.contentCenterX y = y or display.contentCenterY params = params or {} local pathRadius = params.pathRadius or 50 obj.\_pathRot = params.startA or 0 local endA = params.endA or (obj.\_pathRot + 360 ) local time = params.time or 1000 local myEasing = params.myEasing or easing.linear -- Start at right position local vx,vy = angle2Vec( obj.\_pathRot ) vx,vy = vecScale( vx, vy, pathRadius ) obj.x = x + vx obj.y = y + vy obj.onComplete = function( self ) Runtime:removeEventListener( "enterFrame", self ) end obj.enterFrame = function ( self ) local vx,vy = angle2Vec( self.\_pathRot ) vx,vy = vecScale( vx, vy, pathRadius ) self.x = x + vx self.y = y + vy end Runtime:addEventListener( "enterFrame", obj ) transition.to( obj, { \_pathRot = endA, time = time, transition = myEasing, onComplete = obj } ) end

Try these options:

local tmp = display.newCircle( 0, 0, 5 ) --rotateAbout( tmp ) --rotateAbout( tmp, nil, nil, { time = 5000, myEasing = easing.outElastic } ) rotateAbout( tmp, nil, nil, { time = 2000, startA = 270, endA = 90, myEasing = easing.outBounce } )

More easings here: http://docs.coronalabs.com/daily/api/library/easing/index.html

#9

Perfect exactly what I needed, and works great cheers

#10

Great snippet !

Would it be possible to pause/resume this path ?

#11

Sure,

You’d just need to use the transition pause/resume functions:

http://docs.coronalabs.com/daily/api/library/transition/pause.html

http://docs.coronalabs.com/daily/api/library/transition/resume.html

local tmp = display.newCircle( 0, 0, 5 ) transition.pause( tmp ) timer.performWithDelay( 1000, function() transition.resume( tmp ) end ) timer.performWithDelay( 1500, function() transition.pause( tmp ) end ) timer.performWithDelay( 2000, function() transition.resume( tmp ) end )

Tip: You can also modify my example and add a delay parameter to the function which you can then pass to the transition call.  That would also be useful.

#12

Thx for your response :slight_smile:

#13

Sorry to bother but I really enjoy your code !

I wonder if it’s possible to add the option for differents ending and beginning pathRadius.

That would extend your snippet to do elliptic transition.