dearsherlock

# Prototying with Framer
# by Kenny Chen
# Vertical Slider
	
# Setup grid 	
numOfRows = 20
numOfColumns = 3

width = 250
height = 200

dearsherlock

# SliderComponent
	
new BackgroundLayer 
	backgroundColor: "#4a565f"
	
Framer.Defaults.Animation = 
	curve: "spring(300,20,0)"
	
# Create slider component	
slider = new SliderComponent

dearsherlock

slider.on "change:value", ->
	valueTxt.x = slider.pointForValue this.value
	valueTxt.html = Utils.round this.value, 0

dearsherlock

slider.knob.on Events.DragEnd, ->
	valueTxt.animate
		properties:
			scale: 0
	this.animate
		properties:
			scale: 1

dearsherlock

slider = new SliderComponent
	backgroundColor: "red"
	borderRadius: 20
	width: 500
	height: 40
	min: 0
	max: 1000

dearsherlock

# Combining Scroll and Page Components

# Create a nav bar on top
navBar = new Layer
	width: Screen.width
	height: 144
	backgroundColor: "white"
	
# Create a function that assigns rows to a scroll component
randomRows = (scrollComponent, numOfRows, pageIndex)->

dearsherlock

# Import file "weather"
weather = Framer.Importer.load("imported/weather@1x")

# 確保狀態列可以置頂，不然PageComponent換頁會把狀態列移除，但這是因為該sketch檔這樣規劃，若要用圖層去控制，就共用圖層就好。(如photoshop的圖層結構)
weather.statusBar.superLayer=Framer.Device.Screen

# import的layer預設visible為false
weather.honolulu.visible=true
weather.newyork.visible=true
weather.tokyo.visible=true

dearsherlock

#往左跳一頁
pages.snapToNextPage "left"
#在往右跳一頁，執行後其實就原地
pages.snapToNextPage "right"

dearsherlock

pages.snapToPage newPage, true, animationOptions = curve: "spring(100, 10, 0)" 

dearsherlock

# Prototying with Framer
# by Kenny Chen
# PageComponent
	
# Create horizontal page component	
pages = new PageComponent
	width: Screen.width - 20 
	height: Screen.height - 20
	x: 10
	y: 10