Tag: animation

Swift – Simple Animations

Need to create simple animation? Use UIView.animateWithDuration() or one of the other similar methods. While this is fairly easy to use, it is bit cumbersome. Why not make a helper method to simplify your work?

  1. Imagine a method that takes a UIView as a an argument. Since all UI elements are sub classes of UIView you can pass any UI element.
  2. For convenience imagine all of the elements were created at the location where they will end their motion. This means our method will offset the element in the x and or y, then move it back to it’s starting point.
  3. To make the motion interesting and give us some controller we need to pass in the duration.
  4. If everything is moving at the same time things are dull, and some things are not possible. We need a delay.

Our method looks like this:

func animateThing(thing: UIView, offsetY: CGFloat, offsetX: CGFloat, time: NSTimeInterval, delay: NSTimeInterval) {
// some code here 
}

The parameters are

  • thing – a UIView or subclass of UIView, which is the thing to animate
  • offsetY – CGFloat the amount to offset in the y axis. This sets the starting point on the y axis, thing will move back to original position!
  • offsetX – CGFloat the amount to offset on the x axis.
  • time – NSTimeInterval, this can be a Double (0.5 for example), it sets the length of the animation in seconds
  • delay – NSTimeInterval, this sets the time to wait before beginning the motion.

A few points

  1. The offsetX, and offsetY can use positive or negative numbers. Negative values move the object left or up. Positive numbers move down, or right. These determine an offset, that places the object at a new position before the motion begins, the object will end its motion at it’s starting point.
  2. Time is set in seconds. Delay determines how long to wait before the motion begins. The total time of the animation will be time + delay.
  3. It’s probably best to call this function in viewWillAppear. This way the objects get positioned before we see the view, and the motion will be applied each time the view is shown.

Using an Extension

An extension allows you to add functions to existing classes. Rather than adding this function to each custom view controller we create, using an extension we can add an extension to the UIViewController class, and all ViewControllers will have the new function.

Add the first code example to your project in a file named extensions.swift. You’re done! The second code example shows some usage examples and is not required.

Corona SDK – Scrolling landscape

Here are a few ideas to get started creating a scrolling background. Create a background image that repeats, where the left edge would tile seamlessly when connected to the right edge. Copy a section the size of the visible area of the screen and add it to the right side of the image.

Here are a couple images for example. Look at the images carefully and you will see the the 480 pixels on the right side match the first 480 pixels on the left.

Landscape-1

 

Landscape-2 Landscape-3
These images link to the originals at full size. You can download them to use with the example code which follows.

 

Here’s a simple example that works with a single image.

 

local landscape = display.newImageRect( "landscape-1.png", 1440, 320 )

-- landscape:setReferencePoint( display.TopLeftReferencePoint )
landscape_1.anchorX = 0
landscape_1.anchorY = 0
landscape_1.x = 0
landscape_1.y = 0

local function reset_landscape( landscape )
	landscape.x = 0
	transition.to( landscape, {x=0-1440+480, time=30000, onComplete=reset_landscape} )
end

reset_landscape( landscape_1 )

Here’s an example that takes the code above and turns it into a function allowing you to create more animated landscapes without having to duplicate the code. 


local function make_landscape( image, width, height, time )
	local landscape = display.newImageRect( image, width, height )

	-- landscape:setReferencePoint( display.TopLeftReferencePoint )
	landscape.anchorX = 0
	landscape.anchorY = 0	
	landscape.x = 0
	landscape.y = 320 - height
	landscape.time = time
	
	local function reset_landscape( landscape )
		landscape.x = 0
		transition.to( landscape, {x=0-landscape.width+480, time=landscape.time, onComplete=reset_landscape} )
	end
	
	reset_landscape( landscape )
	
	return landscape
end 

local landscape_group = display.newGroup()

local landscape_1 = make_landscape( "Landscape-1.png", 1440, 86, 10000 )
local landscape_2 = make_landscape( "Landscape-2.png", 1440, 168, 20000 )
local landscape_3 = make_landscape( "Landscape-3.png", 1440, 215, 30000 )

landscape_group:insert( landscape_3 )
landscape_group:insert( landscape_2 )
landscape_group:insert( landscape_1 )

Corona – More Easing types

More easing types

The easing types provided out of the box with Corona are limited. Some of the classic easing types that people have long considered standard, like elastic, just aren’t there.

Fear not, these can be added through an external library. I found some code on the Corona site here: https://developer.anscamobile.com/code/more-easing.

Note: The discussion talks about changes and modifications to the first code block presented. The code I’m using here comes from further down the page at post #7.

This library expands the easing types to include the following new types:

  • easeIn
  • easOut
  • easInOut
  • easeOutIn
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeOutInBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
  • easeOutInBounce
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeOutInElastic

These add a lot more possibilities to motion created with transition.to()

Here’s some sample code. The example below imports the new easing library and then applies an elastic ease to an object.

To make this example work you’ll need to get the code from the link above and save into a file named easingX.lua. This new file will need to be in the same folder as main.lua.

-- The easing methods included here expand on the default easing
-- included with Corona. The extra library of easing formulas is
-- imported through the easing.lua. The code for this was obtained
-- at: https://developer.anscamobile.com/code/more-easing
-- Note: The discussion talks about changes and modifications to
-- the first code block presented. The code I'm using here comes
-- from further down the page at post #7.
-- require the easingX library
easingX = require "easingX"

local box = display.newRect( 0, 0, 50, 50 )

box.x = display.contentCenterX

-- Note the use transition in the parameters.
-- get the newer easing ypes from easingX which was required above.
transition.to( box, {time=3000, y=display.contentCenterY, transition=easingX.easeOutElastic} )

Here you can see the box moves with an elastic quality swinging back and forth past the  target value before settling into stop.

Corona – Animation

Corona Animation Overview

Animation can be looked at in two different categories: Object animation and Frame animation.

Object animation would be defined as moving objects on the screen by setting the x, y or other properties. Frame based animation would be animation created by cycling through a series of images.

These two types of animation can be used together. For the first part of this discussion we will look at each separately.

Continue reading Corona – Animation