Zara

Zara.coffee

ZaraBlob = require 'ZaraBlob'
class module.exports extends Layer
	constructor:(options)->
		options ?= {}
		options.innerSize   ?= 1.08
		options.outerSize   ?= 1.4
		options.spinnerSize ?= 1.25
		options.spinnerSpeed ?= 6
		super options
		@.backgroundColor = null	
		
		# Outer (Purple / Blue)	
		@.outerBlob = new ZaraBlob
			superLayer: @
			width:  options.outerSize * @.width
			height: options.outerSize * @.width
			settings : {
				numberOfLayers: 15
				rotation: 45
				alternateDirection: true
				time:   {  start: 3.0, increment : 0.5 }
				offset: {  x: 10, y: 10 }
				spread: {  x: 10, y: 10 }
				spreadAlternateDirection: true
				alternateDirection: true
				types: [{ idx: 0,   layer: (=> new Layer image: "images/zara-circle-blue-blurred.png", opacity: 0.9, scaleX: 0.93, scaleY: 1.01) },
						{ idx: 0.5, layer: (=> new Layer image: "images/zara-circle-purple.png", opacity: 0.1, scaleX: 0.96, scaleY: 1.01)}]
			},			
		@.outerBlob.center()
		
		# Inner purple spinner
		@.spinner = new Layer
			image: "images/zara-spinner.png"
			width: options.spinnerSize * @.width
			height: options.spinnerSize * @.width
			opacity: 1.0
			superLayer: @
		@.spinner.center()
		@.spinner.animate
			repeat: 2000
			curve: "linear"
			time: options.spinnerSpeed
			properties: 	
				rotation: 360		
		
		# Inner White
		@.innerBlob = new ZaraBlob
			superLayer: @
			width:  options.innerSize * @.width
			height: options.innerSize * @.width			
			settings : {
				numberOfLayers: 5 
				rotation: 90	
				time:   { start: 1.0, increment: 2.0 }
				types:  [ { idx: 0, layer: (=> new Layer image: "images/zara-circle-white.png", opacity: 0.5, scaleX: 0.94) } ],				
				offset: { x: 6 , y :0}
				spread: {  x: 0, y: 0 }
				spreadAlternateDirection: true
				alternateDirection: true					
			}		
		@.innerBlob.center()