Random Color Box(Array & Json)

 

 

 

 

 

 

 

 

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
title: “”
author: “Jong Hyeok Im”
twitter: “”
description: “”

# ——-Make PageComponent————-

back_color =[“red”,”blue”,”green”,”yellow”,”white”] Scroll_num_Arr=[]

Scroll_Parent= new ScrollComponent
width: Screen.width
height: Screen.height
backgroundColor: “black”

Scroll_Parent.scrollHorizontal = false
Scroll_Parent.scrollVertical = true

for Scroll_num in [1..5] Vertical_Page = new PageComponent
name: “Horizon #{Scroll_num}”
height: Screen.height/3
width: Screen.width
y: Screen.height/3 * (Scroll_num-1)
backgroundColor: back_color[Scroll_num-1] parent: Scroll_Parent.content
scrollVertical: false
Scroll_num_Arr.push(Vertical_Page);

for Page_num in [1..3] Horizontal_Page = new Layer
width: Screen.width
# x: Screen.width * (Page_num-1)
print Scroll_num_Arr

 

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: ""
	author: "Jong Hyeok Im"
	twitter: ""
	description: ""


# -------Make PageComponent-------------

back_color =["red","blue","green","yellow","white"]
Scroll_num_Arr=[]

Scroll_Parent= new ScrollComponent
	width: Screen.width
	height: Screen.height
	backgroundColor: "black"
	directionLock: true
	scrollHorizontal: false
	
# Scroll_Parent.scrollHorizontal = false
# Scroll_Parent.scrollVertical = true
# 오류코드 왜 잘못됐을까? 위에 두줄과 무슨차이?

for Scroll_num in [1..5]
	Vertical_Page = new PageComponent
		name: "Horizon #{Scroll_num}"
		height: Screen.height/3
		width: Screen.width
		y: Screen.height/3 * (Scroll_num-1)
		backgroundColor: back_color[Scroll_num-1]
		parent: Scroll_Parent.content
		directionLock: true
		scrollVertical: false
	Scroll_num_Arr.push(Vertical_Page);
		
	for Page_num in [0..4]
		Horizontal_Page = new Layer
			name: "Page" + Page_num
			x: Screen.width * Page_num
			# 반드시 X 값을 고쳐줘야된다. 가장 핵심이 부분으로 많이 놓칠 수 있는 부분
			width: Screen.width
			height: Screen.height/3
			backgroundColor: Utils.randomColor()
			# until안에 컬러 랜덤함수를 활용하여 컬러값 변경
			superLayer: Vertical_Page.content
			# 상위 레이어 지정을 For구문안에 상위 객체로 지정하면 문제 해결 superLayer: .content
			# 핵심 질문 1. 이미지 배치는 How? Array X, Y 좌표형식이됨

# print Scroll_num_Arr



 현재 컬러 값이 표시되는 구문 Horizontal_Page.html = Horizontal_Page.backgroundColor.toHexString()

 

http://share.framerjs.com/v3xax6ngl0av/

datas = [
 {
   bgcolor: 'red',
   imgs: ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],	
 },
 
  {
   bgcolor: 'blue',
   imgs: ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],	
 },
 
  {
   bgcolor: 'red',
   imgs: ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],	
 },
 
  {
   bgcolor: 'red',
   imgs: ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],	
 },
 
  {
   bgcolor: 'red',
   imgs: ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],	
 }
 
 
]

back_color =["red","blue","green","yellow","white"]
Scroll_num_Arr=[]
imgs = [ ['images/menu_1.png', 'images/menu_2.png', 'images/menu_3.png', '4.png', '1.png',],
		 ['1.png', '1.png', '1.png', '1.png', '1.png',], 
		 ['1.png', '1.png', '1.png', '1.png', '1.png',], 
		 ['1.png', '1.png', '1.png', '1.png', '1.png',], 
		 ['1.png', '1.png', '1.png', '1.png', '1.png',] ]

print(datas[1].bgcolor)
print(JSON.parse(JSON.stringify(datas[1])))

 

 

인디케이터 작업

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: ""
	author: "design"
	twitter: ""
	description: ""


# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: ""
	author: "Jong Hyeok Im"
	twitter: ""
	description: ""


# -------Make PageComponent-------------

back_color =["red","blue","green","yellow","white"]
Scroll_num_Arr=[]
allIndicators = []	


Scroll_Parent= new ScrollComponent
	width: Screen.width
	height: Screen.height
	backgroundColor: "black"
	directionLock: true
	scrollHorizontal: false
	
# Scroll_Parent.scrollHorizontal = false
# Scroll_Parent.scrollVertical = true
# 오류코드 왜 잘못됐을까? 위에 두줄과 무슨차이?

for Scroll_num in [1..5]
	Vertical_Page = new PageComponent
		name: "Horizon #{Scroll_num}"
		height: Screen.height/3
		width: Screen.width
		y: Screen.height/3 * (Scroll_num-1)
		backgroundColor: back_color[Scroll_num-1]
		parent: Scroll_Parent.content
		directionLock: true
		scrollVertical: false
	Scroll_num_Arr.push(Vertical_Page);
		
	for Page_num in [0..4]
		Horizontal_Page = new Layer
			name: "Page" + Page_num
			x: Screen.width * Page_num
			# 반드시 X 값을 고쳐줘야된다. 가장 핵심이 부분으로 많이 놓칠 수 있는 부분
			width: Screen.width
			height: Screen.height/3
			backgroundColor: Utils.randomColor()
			# until안에 컬러 랜덤함수를 활용하여 컬러값 변경
			superLayer: Vertical_Page.content
			# 상위 레이어 지정을 For구문안에 상위 객체로 지정하면 문제 해결 superLayer: .content
			# 핵심 질문 1. 이미지 배치는 How? Array X, Y 좌표형식이됨
		Horizontal_Page.html = Horizontal_Page.backgroundColor.toHexString()
		Horizontal_Page.style =
			"font-size" : "100px",
			"font-weight" : "100",
			"text-align" : "center",
			"line-height" : "#{Horizontal_Page.height}px"
		Horizontal_Page.animationOptions = curve: "spring(200,22,0)"
		
	for ind_num in [1..5]
		indicator = new Layer 
			backgroundColor: "#222"
			name: "indicator" +ind_num
			width: 12
			height: 12
			x: 28 * (ind_num)
			y: Horizontal_Page.height/5*4
			borderRadius: "50%"
			opacity: 0.2
			superLayer: Vertical_Page
			
		indicator.x += (Screen.width / 2) - (12 * Page_num)
		
			# States
		indicator.states.add(active: {opacity: 1, scale:1.2})
		indicator.states.animationOptions = time: 0.5
		
		# Store indicators in our array
		allIndicators.push(indicator)

# Set indicator for current page
	Vertical_Page.snapToPage(Vertical_Page.content.subLayers[0])
	current = Vertical_Page.horizontalPageIndex(Vertical_Page.currentPage)
	allIndicators[current].states.switch("active")

	Vertical_Page.on "change:currentPage", ->
		indicator.states.switch("default") for indicator in allIndicators
	
	current = Vertical_Page.horizontalPageIndex(Vertical_Page.currentPage)
	allIndicators[current].states.switch("active")
	
# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: ""
	author: "Jong Hyeok Im"
	twitter: ""
	description: ""



# -------Make PageComponent-------------

back_color =["red","blue","green","yellow","white"]
Scroll_num_Arr=[]


#Indicator Function

indicatorMake = (ind_Number,superLayer_Name)->
	allIndicators = []
	for ind_num in [1..ind_Number]
		indicator = new Layer 
			backgroundColor: "#222"
			name: "indicator_" + ind_num
			width: 12
			height: 12
			x: (Screen.width/2)-((50*ind_Number)/2)
			y: superLayer_Name.height/5*4
			borderRadius: "50%"
			opacity: 0.2
			superLayer: superLayer_Name
			
		indicator.x +=  (35 * ind_num)
		
		# States
		indicator.states.add(active: {opacity: 1, scale:1.2})
		indicator.states.animationOptions = time: 0.5
		
		# Store indicators in our array
		allIndicators.push(indicator)
	return allIndicators


# 페이지 만들기
Scroll_Parent= new ScrollComponent
	width: Screen.width
	height: Screen.height
	backgroundColor: "black"
	directionLock: true
	scrollHorizontal: false
	
# Scroll_Parent.scrollHorizontal = false
# Scroll_Parent.scrollVertical = true
# 오류코드 왜 잘못됐을까? 위에 두줄과 무슨차이?

indicatorArr =[]
for Scroll_num in [1..5]
	Vertical_Page = new PageComponent
		name: "Horizon #{Scroll_num}"
		height: Screen.height/4
		width: Screen.width
		y: Screen.height/4 * (Scroll_num-1)
		backgroundColor: back_color[Scroll_num-1]
		parent: Scroll_Parent.content
		directionLock: true
		scrollVertical: false
	Scroll_num_Arr.push(Vertical_Page);
	
	for Page_num in [0..4]
		Horizontal_Page = new Layer
			name: "Page #{Page_num+1}"
			x: Screen.width * Page_num
			# 반드시 X 값을 고쳐줘야된다. 가장 핵심이 부분으로 많이 놓칠 수 있는 부분
			width: Screen.width
			height: Screen.height/3
			backgroundColor: Utils.randomColor()
			# until안에 컬러 랜덤함수를 활용하여 컬러값 변경
			superLayer: Vertical_Page.content
			# 상위 레이어 지정을 For구문안에 상위 객체로 지정하면 문제 해결 superLayer: .content
			# 핵심 질문 1. 이미지 배치는 How? Array X, Y 좌표형식이됨
		Horizontal_Page.html = Horizontal_Page.backgroundColor.toHexString()
		Horizontal_Page.style =
			"font-size" : "#{Horizontal_Page.height/4}px",
			"font-weight" : "100",
			"text-align" : "center",
			"line-height" : "#{Horizontal_Page.height}px"
		Horizontal_Page.animationOptions = curve: "spring(200,22,0)"
		
	indicator = indicatorMake(5, Vertical_Page)
	
# 	인디케이터 그룹별로 저장하기
	indicatorArr[Scroll_num-1] = indicator
	
	# 진입 시, 처음 페이지가 정의하기
	Vertical_Page.snapToPage(Vertical_Page.content.subLayers[2])

	# Set indicator for current page
	current = Vertical_Page.horizontalPageIndex(Vertical_Page.currentPage)
	indicator[current].states.switch("active") 
	
	# Update indicators
Scroll_num_Arr[0].on "change:currentPage", ->
	for to in indicatorArr[0]
		to.states.switch("default")
	current = Scroll_num_Arr[0].horizontalPageIndex(Scroll_num_Arr[0].currentPage)
	indicatorArr[0][current].states.switch("active")

Scroll_num_Arr[1].on "change:currentPage", ->
	for to in indicatorArr[1]
		to.states.switch("default")
	current = Scroll_num_Arr[1].horizontalPageIndex(Scroll_num_Arr[1].currentPage)
	indicatorArr[1][current].states.switch("active")
	
Scroll_num_Arr[2].on "change:currentPage", ->
	for to in indicatorArr[2]
		to.states.switch("default")
	current = Scroll_num_Arr[2].horizontalPageIndex(Scroll_num_Arr[2].currentPage)
	indicatorArr[2][current].states.switch("active")

Scroll_num_Arr[3].on "change:currentPage", ->
	for to in indicatorArr[3]
		to.states.switch("default")
	current = Scroll_num_Arr[3].horizontalPageIndex(Scroll_num_Arr[3].currentPage)
	indicatorArr[3][current].states.switch("active")

Scroll_num_Arr[4].on "change:currentPage", ->
	for to in indicatorArr[4]
		to.states.switch("default")
	current = Scroll_num_Arr[4].horizontalPageIndex(Scroll_num_Arr[4].currentPage)
	indicatorArr[4][current].states.switch("active")

	# Update indicators
# for i in [0..4]
# 	Scroll_num_Arr[i].on "change:currentPage", ->
# 		for j in [0..4]
# 			to.states.switch("default") for to in indicatorArr[j]
# 		for k in [0..4]
# 			current = Scroll_num_Arr[k].horizontalPageIndex(Scroll_num_Arr[k].currentPage)
# 			indicatorArr[k][current].states.switch("active")

	# 			to.states.switch("default") for to in allIndicators 동일한 구문
			
# Scroll_num_Arr[Scroll_num-1]
	

# indicator_Page_Arr[4][4].backgroundColor = "red"

# 		# Update indicators
# 		Vertical_Page.on "change:currentPage", ->
# 			indicator.states.switch("default") for indicator in allIndicators
# 			
# 			current = Vertical_Page.horizontalPageIndex(Vertical_Page.currentPage)
# 			allIndicators[current].states.switch("active")
		
# 		Animation of pages fading out
# 		Scroll_num.previousPage.animate 
# 			curve: "spring"
# 			curveOptions: {tension: 100, friction: 50, velocity: 0, tolerance: 1}
# 				
# 		Scroll_num.previousPage.once Events.AnimationEnd, -> this.scale = 1

 

 

 

 

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.