Skip to main content

transition2.zRotate(): Rotate Corona display objects in the z dimension

I just added another transition function called zRotate() to my transition2 library for Corona. You guessed it, it rotates a display object in the z dimension around either the x or y axis. It requires the display object to have a path with four nodes (x1, y1) to (x4, y4), like images and rects do. If you want to know more about what transition2 is, you can read this blog post.

A simple vertical rotation could look like this:

transition.zRotate(coronaLogo, {
    degrees = 360,
    time = 3000,
    iterations = 0,    
    transition = easing.inOutSine,
    reverse = true,
})



A little more complex example of a horizontal rotation with a color effect at the end of each iteration. Note that this example utilizes two new params: iterationDelay and onIterationComplete (which is not the same as onRepeat).


transition.zRotate(coronaLogo, {
    degrees = -1440,
    time = 4000,
    iterations = 0,    
    transition = easing.inOutQuad,
    perspective = 0.75,
    horizontal = true,        
    iterationDelay = 1000,    
    onIterationComplete = function() 
        transition.color(coronaLogo, {
            startColor = orange,
            endColor = white,
            time = 500,
            transition = easing.inOutSine,
            reverse = true,
        })
    end,
})



As a final example, you can do pretty cool stuff like this bounce/glow/zRotate/to combo: :)


transition.zRotate(coronaLogo, {
    degrees = 360,
    time = 4000,
    iterations = 0,    
    transition = easing.inOutSine,
    reverse = true,
    horizontal = true,
})
transition.glow(coronaLogo, {
    startColor = white,
    endColor = orange,
    time = 2000,
})
transition.bounce(coronaLogo, {
    height = display.contentHeight - 400,
    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,
})



And here's the link to the Github repository where you can get the full source code: https://github.com/rannerboy/corona-transition2

Enjoy!

Comments