A layer that fades between images depending on its state

imageSwappingLayer.coffee

class ImageSwappingLayer extends Layer

	images: {}
	imageSubLayer: false
	imageTransitionTime: 0.5

	constructor: (options={}) ->
		super options
		
		@imageTransitionTime = options.imageTransitionTime if options.imageTransitionTime
		@fadeToBackgroundImage options.image if options.image
			
		@on Events.StateWillSwitch, =>
			@fadeToBackgroundImage image if image = @images[@states.current]

		for event in ["change:width", "change:height"]
			@on event, @resizeSubLayer.bind @
		
	fadeToBackgroundImage: (image) ->
		oldImageSubLayer = @imageSubLayer
		newImageSubLayer = new Layer image: image, width: @width, height: @height, backgroundColor: 'red', superLayer: @, opacity: 0
		setTimeout =>
			newImageSubLayer.animate time: @imageTransitionTime, properties: opacity: 1
			.on "end", -> oldImageSubLayer.destroy() if oldImageSubLayer
			@imageSubLayer = newImageSubLayer

	resizeSubLayer: () ->
		@imageSubLayer.frame = @frame

Usage:

imageLayer = new ImageSwappingLayer width:640, height:1136, image: "images/a.png"
imageLayer.states.add "a", {}
imageLayer.images = {"default": "images/b.png", "a": "images/a.png"}
imageLayer.imageTransitionTime = 0.1
imageLayer.on Events.Click, -> imageLayer.states.next()