box-animation-circle.coffee

START_POSITION = 60
ADJUIST = 5

boxMaker = (y) -> new Layer
	name: 'box'
	opacity: 0
	x: Align.center
	y: y
	backgroundColor: Utils.randomColor()
	width: Screen.width - 10
	height: 40

circleMaker = (y) -> new Layer
	name: 'circle'
	opacity: 0
	x: Align.center
	y: y
	backgroundColor: Utils.randomColor()
	width: 100
	height: 100
	borderRadius: 50
	
body = new Layer
	size: Screen.size
	backgroundColor: '#fff'

text = new TextLayer
	text: 'GO'
	index: 100
	x: Align.center
	y: 20

text.onClick -> 
	for i in [0...30] 
		body.addChild boxMaker( (START_POSITION + 5) * i )
		body.addChild circleMaker( (START_POSITION + 5) * i )
	
	for bg, bbb in body.children
		bg.opacity = 0
		bg.animate
			opacity: .6
			y: Align.center
			scale: if bg.name == 'circle' then 0.46 else 1.3
			options: 
				delay: .2 + (bbb * .04)
				curve: Spring(1)
				time: 3	

box-animation.coffee

HEIGHT = 40


boxMaker = (y) -> new Layer
	name: 'box'
	opacity: 0
	x: Align.center
	y: y
	backgroundColor: Utils.randomColor()
	width: Screen.width - 10
	height: HEIGHT

body = new Layer
	size: Screen.size
	backgroundColor: '#fff'

text = new TextLayer
	text: 'GO'
	index: 100
	x: Align.center
	y: 20

text.onClick -> 			
	for i in [0...10] 
		body.addChild boxMaker(i*(HEIGHT+5))
	
	for bg, index in body.children
		bg.opacity = 0
		bg.animate
			opacity: .6
			y: Align.center
			scale: 0.46
			options: 
				delay: .2 + (index * .1)
				curve: Spring(1)
				time: 4.59