Layers

Layers are the basic containers of Framer, which can contain images, videos, or text. You can position layers with numeric values and dynamic values. Layers contain many properties that define their appearance, such as opacity, rotation and scale. Layers can also be nested to adjust their hierarchy.
Framer에서 기본이 되는 컨테이너인 Layer는, 이미지와 비디오 혹은 텍스트를 담고있다. 여러분은 레이어를 숫자값과 동적 값에 따라 위치시킬 수 있따. 레이어는 많은 속성을 가지며 이는 투명도, rotation and scale과 같이 보여지는 것으로 정의된다. 또한 레이어는 상속구조를 조정할 수 있다.

To create a layer, use the new keyword. Every layer has a set of default properties: a blue background, and a default width and height of 100.
new로 layer를 생성한다. 모든 레이어는 다음과 같은 기본 속성을 가진다: 파란색 배경, 너비와 높이 각각 100

layerA = new Layer

You can set layer properties when creating them:
layer를 생성하고 난 후에, 모든 layer의 속성값을 설정할 수 있다.

layerA = new Layer
   x: 100
   y: 100
   width: 250
   height: 250
   opacity: 0.5     # 투명도
   backgroundColor: "white"

And you can also override them later:

layerA = new Layer
   x: 100
   y: 100

# 생성 시에 주었던 y값을 오버라이딩  
layerA.y = 200                           
# 생성 시에 주었던 투명도를 오버라이딩  
layerA.opacity = 1

layer.id `<number>`

A unique identification number for this layer. No other layer will have this number. The layer id is read only and cannot be changed.
해당 layer에 대한 유일무이한 숫자가 할당된다. 다른 layer는 이제 이값을 가질 수 없게 된다. layer id는 읽기만 가능하고 한 번 할당되면 변경되지 않는 성질이 있다.

layerA = new Layer
print layerA.id
# 출력: 1

layer.name `<string>`

The layer name. This is not set by default but you can set it yourself. Imported layers from Sketch and Photoshop will have the source layer group set.
해당 layer에 이름을 붙일 수 있다. 생성시에 기본 값이 주지 않으므로 여러분이 직접 이름을 지어야한다. Sketch나 Photoshop에서 임포트한 layer는 해당 소스의 layer 그룹 집합을 갖게 된다.

layerA = new Layer
layerA.name = "Button"

print layerA.name
# 출력: "Button"

layer.x `<number>`

The x property of a layer defines its x position relative to the top left corner.
layer에서 x 속성은 x 좌표를 의미한다. x 좌표는 맨위 왼쪽을 0 기준으로 하는 상대 좌표이다.

layerA = new Layer
layerA.x = 500

layer.y `<number>`

The y property of a layer defines its y position relative to the top left corner.
layer에서 y 속성은 y 좌표를 의미한다. y 좌표는 맨위 왼쪽을 0 기준으로 하는 상대 좌표이다.

layerA = new Layer
layerA.y = 500

layer.z `<number>`

The z property of a layer defines its position in space, also known as depth. The larger this value, the further away the object is from the point of view.
레이어의 z 속성은 공간 안에서의 좌표를 의미하며, 이는 깊이로 이해할 수 있다. 이 값이 커질수록, 개체 관점에서는 더 멀어진다.
Remember that you will have to enable perspective on a parent layer before you can see this effect. Also note the z property is different from layer.index (z-index) which defines the order for layers when they all have the same z value.

layerA = new Layer
layerA.z = 500

layer.width `<number>`

The width of the layer in pixels.
픽셀 상에서 레이어의 폭(너비).

layerA = new Layer
layerA.width = 500

layer.height `<number>`

The height of the layer in pixels.
픽셀 상에서 레이어의 높이.

layerA = new Layer
layerA.height = 500

layer.minX `<number>`

The left edge location of the layer. Same as layer.x.
레이어의 가장 왼쪽 모서리로, layer.x와 같다.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.minX
# 출력: 100

layer.midX `<number>`

The horizontal center for the layer.
레이어 가로축의 중앙 좌표값.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.midX
# 출력: 150

layerA.midX = 500
print layerA.x
# 출력: 450

layer.maxX `<number>`

The right edge location of the layer.
레이어의 가장 오른쪽 모서리 끝 좌표값.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.maxX
# 출력: 200

layerA.maxX = 500
print layerA.x
# 출력: 400

layer.minY `<number>`

The top edge location of the layer. Same as layer.y.
레이어 가장 꼭대기의 위치. layer.y와 같다.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.minY
# 출력: 100

layer.midY `<number>`

The vertical center for the layer.
레이어 세로축의 중앙값.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.midY
# 출력: 150

layerA.midY = 500
print layerA.y
# 출력: 450

layer.maxY `<number>`

The bottom edge location of the layer.
레이어 가장 바닥의 위치.

layerA = new Layer
   x: 100
   y: 100
   width: 100
   height: 100

print layerA.maxY
# 출력: 200

layerA.maxY = 500
print layerA.y
# 출력: 400

layer.point `<object>`

Allows you to set or capture the x, and y values of a layer.
레이어의 x, y 값을 설정하거나 캡쳐해볼 수 있다.

layerA = new Layer

print layerA.point
# 출력: { x: 100, y: 100 }

layerA.point =
   x: 10
   y: 200 

print layerA.point
# 출력: { x: 10, y: 200 }

print layerA.x
# 출력: 10

layer.size `<object>`

Allows you to set or capture the width and height values of a layer.
레이어의 너비나 높이 값을 설정하거나 캡쳐해볼 수 있다.

layerA = new Layer

print layerA.size
# 출력: { width: 100, height: 100 }

layerA.size =
   width: 10
   height: 10

print layerA.size
# 출력: { width: 10, height: 10 }

print layerA.width
# 출력: 10

layer.frame `<object>`

Allows you to set or capture the x, y, width and height values of a layer.
레이어의 x, y, 너비, 높이 값을 설정하거나 캡쳐해볼 수 있다.

layerA = new Layer

print layerA.frame
# 출력: { x: 100, y: 100, width: 100, height: 100 }

layerA.frame =
   x: 10
   y: 200
   width: 10
   height: 10

print layerA.frame
# 출력: { x: 10, y: 200, width: 10, height: 10 }

print layerA.x
# 출력: 10

layer.properties `<object>`

Gets or sets all properties for this layer.
해당 레이어의 모든 속성을 얻어오거나 설정할 수 있다.

layerA = new Layer

print layer.properties
# 출력: { x: 100, y: 100, ...}

layer.center()

Center this layer in its superlayer. If there is no superlayer it will be centered relative to the screen.
레이어를 수퍼레이어의 중앙으로 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표에 의해 중앙으로 위치한다.

layerA = new Layer
   width: 500
   height: 500

layerB = new Layer
   superLayer: layerA
   width: 100
   height: 100

layerB.center()

print layerB.x, layerB.y
# 출력: 200, 200

layer.centerX(offset `<number>`)

Center this layer horizontally in its superlayer. If there is no superlayer it will be centered relative to the screen. The offset is a pixel offset from the center and optional.
레이어를 수퍼레이어의 가로로 중앙에 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표에 의해 중앙으로 위치한다. offset은 중앙 지점 픽셀의 오프셋 값으로 주어지며 옵션이다.

layerA = new Layer
   width: 500
   height: 500

layerB = new Layer
   superLayer: layerA 
   width: 100
   height: 100

layerB.centerX()
print layerB.x, layerB.y
# 출력: 200, 0

layerB.centerX(20)
print layerB.x, layerB.y
# 출력: 220, 0

layer.centerY(offset `<number>`)

Center this layer vertically in its superlayer. If there is no superlayer it will be centered relative to the screen. The offset is a pixel offset from the center and optional.
레이어를 수퍼레이어의 수직으로 중앙에 위치시킨다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표에 의해 중앙으로 위치한다. offset은 중앙 지점 픽셀의 오프셋 값으로 주어지며 옵션이다.

layerA = new Layer
   width: 500
   height: 500

layerB = new Layer
   superLayer: layerA 
   width: 100
   height: 100

layerB.centerY()
print layerB.x, layerB.y
# 출력: 0, 200

layerB.centerY(20)
print layerB.x, layerB.y
# 출력: 0, 220

layer.pixelAlign()

Round the x and y values for this layer to whole numbers so it will be drawn exactly on the pixel.
레이어의 x와 y 값을 반올림하고 정수로 표현하여 픽셀로 정확히 그릴 수 있도록 한다.

layerA = new Layer
   x: 100.18293
   y: 10.12873

layerA.pixelAlign()

print layerA.x, layerA.y
# 출력: 100, 10

layer.screenFrame `<object>`

Allows you to set or capture the absolute position of this layer on the screen, ignoring the inherited coordinate system from its parents. Or, the exact position on the screen.
부모로부터 상속받은 좌표계를 무시하고 스크린 상의 레이어의 절대 위치를 설정하거나 캡처 할 수 있다. 또는 스크린 상의 정확한 위치.

layerA = new Layer
   x: 100

layerB = new Layer
   superLayer: layerA
   x: 100

print layerB.screenFrame
# 출력: { x: 200, y: 0, width: 100, height: 100 }

layerB.screenFrame =
   x: 400
   y: 0
   width: 100
   height: 100

print layerB.x
# 출력: 300

layer.contentFrame()

Returns: Object

The calculated frame for the total size of all the subLayers combined.
모든 서브레이어를 하나로 합 프레임 전체의 크기를 계산한다.

layerA = new Layer
layerB = new Layer
   superLayer: layerA
   x: 0
   width: 100

layerC = new Layer
   superLayer: layerA
   x: 100
   width: 300

print layerA.contentFrame()
# 출력: { x: 0, y: 0, width: 400, height: 100 }

layer.centerFrame()

Returns: Object
The calculated frame centered in its superlayer. If there is no superlayer it will be centered relative to the screen.
수퍼레이어의 중앙에 위치시켰을 때의 프레임을 계산한다. 만약 수퍼레이어가 없다면, 스크린의 상대 좌표에 의해 중앙으로 위치한다.

layerA = new Layer
   width: 500
   height: 500

layerB = new Layer
   superLayer: layerA 
   width: 100
   height: 100

print layerB.centerFrame()
# 출력: { x: 200, y: 200, width: 100, height: 100 }

layer.backgroundColor `<string>`

Sets the background color for this layer. The color is expressed as a string in the css color format. Layers have a default light blue background color so you can see them.
레이어의 배경색을 지정한다. 색상은 css 색상표에 있는 문자로 표현된다. 레이어들은 기본적으로 light blue 배경색을 가지며, 눈으로 레이어를 확인할 수 있다.

layerA = new Layer

layerA.backgroundColor = "red"
layerA.backgroundColor = "#00ff00"
layerA.backgroundColor = "rgba(134, 12, 64, 0.3)"
layerA.backgroundColor = "transparent"

# Remove the background color  
# 배경색 없애기  
layerA.backgroundColor = ""

layer.image `<string>`

Sets the background image url or path for this layer. You can set it as a local path or a full url. If the image is hosted online, it can may a little while to load. The image will always fit to cover the layer and never be stretched. Setting an image will remove the background color of a layer. You can remove an image by setting it to null or an empty string. Local images will not use the browser cache. You can be notified of when an image is loaded and ready to display with the Events.ImageLoaded event. If there is an error loading an image (like not found) it will throw an Events.ImageLoadError event.
레이어에 들어갈 배경 이미지의 url이나 경로를 지정한다. 여러분은 로컬 경로나 전체 url을 지정할 수 있다. 만약 이미지가 온라인에 있다면, 로드하는데 약간 시간이 소요된다. 이미지는 언제나 레이어에 맞춰지며 절대 늘어나지 않는다. 이미지가 설정되면 레이어의 배경색은 없어진다. 여러분은 null이나 빈 문자열을 줌으로써 이미지를 삭제할 수 있다. 로컬 이미지는 브라우저 캐시를 사용하지 않는다.

layerA = new Layer

layerA.image = "images/logo.png"
layerA.image = "http://framerjs.com/logo.png"

# Listen to the loading event  
# loading event를 감지한다.  
layerA.on Events.ImageLoaded, ->
   print "the image is loaded"

layerA.on Events.ImageLoadError, ->
   print "the image could not be loaded"

layerA.image = "images/other-logo.png"

layer.visible `<boolean>`

Sets wether the layer should be visible or not.
레이어가 보이거나 안보이도록 설정한다.

layerA = new Layer
layerA.visible = false

layer.opacity `<number>`

Sets the opacity for this layer. Opacity is defined with a number between 0 and 1 where 0 is invisible and 1 fully opaque.
레이어의 투명도를 설정한다. 투명도는 숫자 0과 1 사이 값으로 정의되며, 0은 투명해서 안보이고 1은 완전히 불투명하다.

layerA = new Layer
layerA.opacity = 0.5

layer.clip `<boolean>`

Sets wether the layer should clip its sublayers. Clipping is enabled by default.
Note that clipping with rounded corners enabled can be buggy, because the browser cannot take the hardware accelerated rendering path. If you need it anyway you can enable layer.force2d on all the sublayers that need to be clipped.
레이어가 서브레이어들을 클립하도록 설정한다. 클립핑은 기본적으로 활성화된다.
브라우저는 렌더링 패스를 하드웨어로 가속시킬 수 없기 때문에, 모서리를 둥글게하고 클리핑하면 버그가 생긴다는 점에 유의하라. 어쨌든, 만약 여러분이 그것을 필요로 하면, 여러분은 클립할 필요가 있는 모든 서브 레이어에 대해 layer.force2d를 활성화 할 수 있다.

layerA = new Layer
   width: 100
   height: 100

layerB = new Layer
   width: 200
   height: 200
   superLayer: layerA 

layerA.clip = false

layer.ignoreEvents `<boolean>`

Sets wether the layer responds to any user events like click or touch. When disabled, no user events on the layer will be emitted. The default value for this is true because performance is better when layers don't have to account for events. Framer automatically disables it when you add an event listener.
클릭하거나 터치하는 등의 사용자 이벤트를 발생시키면 레이어가 응답하도록 설정한다. 비활성화 되어있을 때, 어떠한 사용자 이벤트도 발생하지 않는다.
레이어가 계정이나 이벤트를 갖지 않을 때 성능이 가장 좋기 때문에 true를 기본값으로 한다. 여러분이 이벤트 감지자를 등록하면 Framer는 이 값을 자동으로 비활성화한다.

layerA = new Layer

layerA.on Events.Click, ->
   print "Click!"

# Now it won't respond to a click  
# 클릭하면 응답하지 않는다.
layerA.ignoreEvents = true

# Now it will  
# 이제 클릭하면 응답한다.
layerA.ignoreEvents = false

layer.force2d `<boolean>`

Sets wether the layer should only render 2d properties. This bypasses the GPU accelerated rendering so can be slow to animate. When this is enables you cannot for example rotate in 3d space. The main purpose of this setting is to get advanced masking to work, like having a mask with rounded corners.
레이어가 2d 속성만 제공하도록 설정한다. 이것은 애니메이션 속도가 느려질 수 있으므로 GPU의 렌더링 가속을 무시한다. 이 것이 활성화되어 있을 때, 여러분은 3d 공간에서 회전하는 등의 동작은 할 수 없다. 이 설정의 주요 목적은 모서리를 둥글게 한 마스크를 갖는 것 같은 작업에 향상된 마스킹을 얻는 것이다.

layerA = new Layer
   width: 400
   height: 400
   backgroundColor: "red"

layerB = new Layer
   width: 300
   height: 300
   backgroundColor: "blue"

layerB.borderRadius = layerB.width / 2

layerA.force2d = true
layerA.superLayer = layerB

layer.originX `<number>`

Sets the x origin for scale, rotate and skew transformations. So for example point that a layer rotates around. The origin is defined as a number between 0 and 1 where 0 is the most left edge of the layer and 1 the most right edge. The default value is 0.5, the center of the layer.
scale, rotate, skew transformations를 하기 위한 x의 원점(origin)을 설정한다. So for example point that a layer rotates around. 원점은 0과 1 사이의 숫자로 정의되며, 0이 레이어의 가장 왼쪽 모서리 값을, 1은 가장 오른쪽 모서리 값을 의미한다. 기본값은 0.5로, 레이어의 중앙이다.

layerA = new Layer
layerA.rotation = 45
layerA.originX = 0
layerA.originX = 1

layer.originY `<number>`

Sets the y origin for scale, rotate and skew transformations. So for example point that a layer rotates around. The origin is defined as a number between 0 and 1 where 0 is the most top edge of the layer and 1 the most bottom edge. The default value is 0.5, the center of the layer.
scale, rotate, skew transformations를 하기 위한 y의 원점(origin)을 설정한다. So for example point that a layer rotates around. 원점은 0과 1 사이의 숫자로 정의되며, 0이 레이어의 가장 꼭대기 값을, 1은 가장 바닥 값을 의미한다. 기본값은 0.5로, 레이어의 중앙이다.

layerA = new Layer
layerA.rotation = 45
layerA.originY = 0
layerA.originY = 1

layer.perspective `<number>`

Sets the perspective for child layers. Perspective gives depth to 3d properties like rotationX, rotationY. The rotation is set from 1 to Infinity where 1 is a huge perspective. Setting perspective to 0 gives you an isometric effect. Perspective is disabled by default.
Because of the way Safari renders, the perspective property can disable retina quality rendering. I think this is a bug and will be solved at some point. When used with rotation and/or animation you don't notice this too much though.
layer.perspective 는 하위 레이어의 원근감을 설정한다. 원근값은 rotationX나 rotationY와 같은 3d 속성에 깊이를 준다. 값은 1부터 무한대로 설정할 수 있고, 1이 가장 큰 원근감을 가진다. 원근값을 0으로 설정하면, 회전하지 않고 수축하는 효과를 줄 수 있다. 원근값은 기본적으로 비활성화되어 있다.
Because of the way Safari renders, the perspective property can disable retina quality rendering. I think this is a bug and will be solved at some point. When used with rotation and/or animation you don't notice this too much though.

layerA = new Layer

# Set the perspective for all sub layers
layerA.perspective = 100

layerB = new Layer
   superLayer: layerA
   rotationX: 30
   rotationY: 30

layer.rotation `<number>`

Sets rotation for the layer relative to its transform origin. The rotation is defined in degrees between 0 and 360.
원점을 기준으로 레이어의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설정할 수 있다.

layerA = new Layer
layerA.rotation = 45

layer.rotationX `<number>`

Sets x rotation for the layer relative to its transform origin. The rotation is defined in degrees between 0 and 360.
원점을 기준으로 레이어 x 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설정할 수 있다.

layerA = new Layer
layerA.rotationX = 45

layer.rotationY `<number>`

Sets y rotation for the layer relative to its transform origin. The rotation is defined in degrees between 0 and 360.
원점을 기준으로 레이어 y 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설정할 수 있다.

layerA = new Layer
layerA.rotationY = 45

layer.rotationZ `<number>`

Sets z rotation for the layer relative to its transform origin. The rotation is defined in degrees between 0 and 360. The z rotation is the same as layer.rotation.
원점을 기준으로 레이어 z 좌표의 상대적인 회전값을 설정한다. 회전값은 0과 360 사이 값으로 설정할 수 있다. z 좌표의 회전값은 레이어와 같다.

layerA = new Layer
layerA.rotationZ = 45

layer.scale `<number>`

Sets scale for the layer relative to its transform origin. The default scale is 1. Any number smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 상대적인 scale을 설정한다. Scale의 기본값은 1이며, 1보다 작으면 크기가 작아진다.

layerA = new Layer
layerA.scale = 2
layerA.scale = 0.5

layer.scaleX `<number>`

Sets the horizontal scale for the layer relative to its transform origin. The default scale is 1. Any number smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 가로 길이를 설정한다. Scale의 기본값은 1이며, 1보다 작으면 사이가 작아진다.

layerA = new Layer
layerA.scaleX = 2
layerA.scaleX = 0.5

layer.scaleY `<number>`

Sets the vertical scale for the layer relative to its transform origin. The default scale is 1. Any number smaller then one will decrease the size and vice versa.
원점을 기준으로 레이어의 세로 길이를 설정한다. Scale의 기본값은 1이며, 1보다 작으면 사이가 작아진다.

layerA = new Layer
layerA.scaleY = 2
layerA.scaleY = 0.5

layer.superLayer `<Layer object>`

Sets the superlayer (or parent) for this layer. You can set the superlayer to null if you want the layer to live at the root of your document.
레이어의 수퍼레이어(혹은 부모레이어)를 설정한다. 만약 해당 레이어를 root로 두고싶다면, 수퍼레이어를 null로 설정할 수 있다.

layerA = new Layer
layerB = new Layer

layerB.superLayer = layerA

print layerB.superLayer
# 출력: <Object:Layer layerA>

layer.subLayers `<array>`

All the sub (or child) layers for this layer.
해당 레이어의 모든 서브레이어.

layerA = new Layer

layerB = new Layer
   superLayer: layerA

layerC = new Layer
   superLayer: layerA

print layerA.subLayers
# 출력: [<Object:Layer layerB>, <Object:Layer layerC>]

layer.subLayersByName(name `<string>`)

Returns: Array with Layer Objects

All the sub (or child) layers for this layer filtered by name.
해당 레이어의 모든 서브레이어를 이름으로 필터링할 수 있다.

layerA = new Layer

layerB = new Layer
   name: "navigation"
   superLayer: layerA

layerC = new Layer
   name: "button"
   superLayer: layerA

print layerA.subLayersByName("button")
# 출력: [<Object:Layer layerC>]

layer.addSubLayer(layer `<Layer object>`)

Add a layer as a sublayer to this layer. This will change the superlayer of the added sublayer.
해당 레이어에 서브레이어를 추가한다. 서브레이어로 추가되면 수퍼레이어가 바뀐다.

layerA = new Layer
layerB = new Layer

layerA.addSubLayer(layerB)

print layerB.superLayer
# 출력: <Object:Layer layerA>

layer.removeSubLayer(layer `<Layer object>`)

Remove a layer from the sublayers of this layer.
해당 레이어의 서브레이어를 삭제한다.

layerA = new Layer
layerB = new Layer
   superLayer: layerA 

layerA.removeSubLayer(layerB)

print layerB.superLayer
# 출력: null

layer.siblingLayers()

Returns: Array with Layer Objects

All the layers that are also sublayers of the same superlayer. So layers that are at the same place in the layer hierarchy.
같은 수퍼레이어의 모든 서브레이어를 보여준다. 해당 레이어와 같은 계층에 위치하고 있는 다른 레이어들을 볼 수 있다.

layerA = new Layer

layerB = new Layer
   superLayer: layerA

layerC = new Layer
   superLayer: layerA 

print layerB.siblingLayers()
# 출력: [<Object:Layer layerC>]

layer.index `<number>`

The order index for this layer. Sibling layers with a higher index (and the same z value) will drawn on top of this layer, and those with a lower index below.
The layer index increases by order of insertion. So if you add a layer as a sublayer and the highest sibling index value is 5, the index of the inserted layer will be 6 (5 + 1). Or, the last inserted layer will always be on top.
해당 레이어의 인덱스 순서를 지정한다. 높은 인덱스(z 값과 같다)의 형제 레이어는 가장 상위에 그려지며, 낮은 인덱스는 아래에 그려진다.
레이어의 인덱스는 추가되는 순서대로 증가한다. 따라서 만약 레이어를 서브레이어로 추가하면서 인덱스를 5로 준다면, 추가된 레이어의 인덱스는 5(5+1)이다. 혹은 가장 마지막에 추가된 레이어가 항상 맨 위에 놓여진다.

layerA = new Layer
layerB = new Layer

# Draw layerB on top
layerA.index = 2
layerB.index = 1

layer.placeBefore(layer `<Layer object>`)

Places this layer before another layer. This changes the layer.index property for at least one of the layers. This method only works on layers that have the same superlayer, or no superlayer at all.
해당 레이어를 다른 레이어보다 앞으로 위치시킨다. 이는 레이어들 중 최소한 레이어 하나의 layer.index 속성을 변경하는 것이다. 이 방법은 같은 수퍼레이어 아래에 있거나, 수퍼레이어가 없는 레이어에서만 사용할 수 있다.

layerA = new Layer
layerB = new Layer

# Draw layerB on top
layerB.placeBefore(layerA)

layer.placeBehind(layer `<Layer object>`)

Places this layer behind another layer. This changes the layer.index property for at least one of the layers. This method only works on layers that have the same superlayer, or no superlayer at all.
해당 레이어를 다른 레이어보다 뒤로 위치시킨다. 이는 레이어들 중 최소한 레이어 하나의 layer.index 속성을 변경하는 것이다. 이 방법은 같은 수퍼레이어 아래에 있거나, 수퍼레이어가 없는 레이어에서만 사용할 수 있다.

layerA = new Layer
layerB = new Layer

# Draw layerB on top
layerA.placeBehind(layerB)

layer.bringToFront()

Places this layer in front of all other layers with the same superlayer.
같은 수퍼레이어 하에 있는 모든 레이어보다 가장 앞으로 레이어를 위치시킨다.

layerA = new Layer
layerB = new Layer
layerC = new Layer

# Draw layerA on top
layerA.bringToFront()

layer.sendToBack()

Places this layer behind all other layers with the same superlayer.
같은 수퍼레이어 하에 있는 모든 레이어보다 가장 뒤로 레이어를 위치시킨다.

layerA = new Layer
layerB = new Layer
layerC = new Layer

# Draw layerC last
layerC.sendToBack()

layer.html `<string>`

Insert arbitrary html into this layer. The html can be anything, from simple text, to form elements to canvas or svg content.
If you need to target any of the created elements, remember that they are only available after Framer rendered them (just like document.ready in jQuery). To reliably get a reference to a dom element in the layer.html use layer.querySelector or layer.querySelectorAll. If the html content that gets inserted needs user interaction, it is smart to set layer.ignoreEvents to false. Framer tries to do it automatically for some elements. Note that to retain the layer structure the html will actually be inserted in a special element that gets created when you set html for the first time.
레이어에 임의로 html을 추가한다. html에는 아주 간단한 텍스트부터 canvas나 svg 컨텐츠 같은 form element까지 무엇이든 추가할 수 있다.
만약 여러분이 만들어낸 elements 중 하나를 추가하고 싶다면, Framer가 그것들을 렌더링 한 후에만 사용할 수 있다는 점을 기억하자(jQuery의 document.ready와 같이). layer.html에서 layer.querySelector 나 layer.querySelectorAll를 사용해봄으로써 dom element에 대해 확실히 이해할 수 있다.
html 컨텐츠에 사용자 인터렉션을 추가하고자 한다면, layer.ignoreEvents를 false로 설정함으로써 수행할 수 있다. Framer에서는 이를 포함하여 몇몇 elements를 자동으로 수행한다. Note that to retain the layer structure the html will actually be inserted in a special element that gets created when you set html for the first time.

layerA = new Layer

# Add simple text content
layerA.html = "Hello"

# Add inline styled text content
layerA.html = "I'm <span style='color:red'>Koen</span>"

# Add an input field
layerA.html = "<input type='text' value='Hello'>"

# Add a div with a canvas element and get a reference
layerA.html = "<div><canvas id='canvas'></canvas></div>"
canvasElement = layerA.querySelectorAll("#canvas")

layer.style `<object>`

Set or get css style properties for the layer.
Most of the style properties are managed by Framer internally so it is preferred that you use those when you can (for example layer.backgroundColor vs layer.style["background-color"]). The reason for this is that it's slow to read the values from the dom so to keep animations fast we keep a cache.
Next to the standard css property names you can also camelCase naming. So layer.style["border-color"] is the same as layer.style.borderColor. For a full list see this overview.
레이어의 css style 속성을 설정하거나 얻어온다. style 속성의 대부분은 Framer 내부적으로 관리된다(예시. layer.backgroundColor vs layer.style["background-color"]). 그 이유는 dom에서 값을 읽어오면 느리기 때문에,캐시를 유지해 애니메이션을 빠르게 유지한다.
css 표준 속성의 이름은 camelCase 네이밍 룰을 사용할 수 있다. 따라서 layer.style["border-color"]는 layer.style.borderColor와 같다. 전체 리스트는 여기에서 볼 수 있다.

layerA = new Layer

# Modify a single style property
layerA.style["outline"] = "1px solid red"

# Modify set of style properties
layerA.style =
   "outline": "1px solid red",
   "padding": "10px"

# Get a specific style property
print layerA.style["outline"]
# 출력: "1px solid red"

layer.computedStyle()

Returns: Object

Get all the current applied css style properties for the layer, directly and defined by css rules.
Note that this is an expensive operation for the browser.
For a full reference on computed style, see this overview.
현재 레이어에 적용된 css style 모든 속성을 즉시 읽어오고, css 룰에 의해 정의된다. 단, 브라우저에 부하가 많이 걸리는 작업임을 명심하자.
computed style에 대한 전체 레퍼런스는 여기에서 확인할 수 있다.

layerA = new Layer
layerA.backgroundColor = "red"

print layer.computedStyle()["background-color"]
# 출력: "red"

layer.classList `<ClassList object>`

A list of class attributed for the layer. Also contains methods to add, remove, toggle and check for classes. For a full reference, see this overview.
레이어에 속한 classList를 위한 개체이다. 클래스의 추가, 삭제, 토글, 체크하기 위한 메소드를 추가할 수 있다.
전체 레퍼런스는 여기에서 확인할 수 있다.

layerA = new Layer

# Add the class .red
layerA.classList.add("red")

# Remove the class .red
layerA.classList.remove("red")

# Toggle the class .red
layerA.classList.toggle("red")

# See if the layer has class .red
print layerA.classList.contains("red")
# 출력: true

layer.destroy()

This will remove a layer from the hierarchy and remove all its listeners. If the layer has sublayers they will be destroyed too.
현재 있는 계층에서 레이어를 삭제하고, 모든 감지자를 삭제한다. 만약 삭제하려는 레이어가 서브레이어를 가지고 있다면, 서브레이어도 모두 없어진다.

layerA = new Layer
layerA.destroy()

layer.copy()

Returns: Layer object

This will copy a layer and all its sublayers. The layers will have all the same properties as their copied counterparts (same position and looks). The event listeners will not be copied.
layer.copy()는 레이어와 모든 서브레이어를 복사한다. 복사된 레이어들의 모든 속성은 기존 레이어와 동일하다(위치, 모양 등 모두 같다). 이벤트 감지자는 복사되지 않는다.

layerA = new Layer
layerB = new Layer superLayer:layerA 

layerC = layerA.copy()

layer.copySingle()

Returns: Layer object

This will copy a layer without its sublayers. The event listeners will not be copied.
layer.copySingle()를 사용하면 서브레이어는 제외하고 복사한다. 이벤트 감지자는 복사하지 않는다.

layerA = new Layer
layerB = new Layer
   superLayer: layerA 

layerC = layerA.copySingle()

layer.blur `<number>`

Adds a gaussian blur to the layer. Gaussian blur is defined in pixels. The default value is 0.
레이어에 Gaussian blur 효과를 준다. Gaussian blur는 픽셀에 지정되며, 기본값은 0이다.

layerA = new Layer
layerA.blur = 10

layer.brightness `<number>`

Brightens or darkens a layer. Brightness is defined with a number. Setting brightness to zero produces a completely black layer, while the value that produces a completely white layer depends on the color of your layer or image.
레이어에 명암을 준다. layer.brightness는 숫자로 표현한다. 밝기를 0으로 주면 완전히 까만 레이어가 되고, 반면에 완전 하얀 레이어를 만드는 것은 여러분이 만든 레이어나 이미지의 색상에 달려있다.

layerA = new Layer
layerA.brightness = 10

layer.saturate `<number>`

Saturates a layer. Saturation is defined with a number between 0 and 100 where 0 removes all saturation and 100 is default.
레이어의 채도를 조절한다. layer.saturate는 0과 100 사이 값으로 지정하며, 0이면 모든 채도를 없애고 100이 기본값이다.

layerA = new Layer
layerA.saturate = 50

layer.hueRotate `<number>`

Sets the hue of a layer. The hue rotation is defined in degrees between 0 and 360. The default value is 0.
레이어의 색조(hue)를 설정한다. layer.hueRotate은 0부터 360도 사이의 값으로 지정하며, 기본값은 0이다.

layerA = new Layer
layerA.hueRotate = 180

layer.contrast `<number>`

Sets the contrast of a layer. Contrast is defined with a number between 0 and 100 where 0 is removes all contrast. The default value is 100.
레이어의 대비(contrast)를 설정한다. layer.contrast는 0부터 100 사이의 값으로 지정하며, 0은 모든 contrast를 없앤다. 기본값은 100이다.

layerA = new Layer
layerA.contrast = 50

layer.invert `<number>`

Inverts the color of a layer. Invert is defined with a number between 0 and 100. The invert property inverts all colors and brightness values of a layer. Setting invert to 100 on a colored layer replaces all hues with their complementary colors. The default value is 0.
레이어의 색상을 반전한다. layer.invert는 0부터 100 사이의 값으로 지정한다. invert 속성은 모든 색상과 레이어의 밝기 값을 반전시킨다. 색상이 있는 레이어에 invert 값을 100으로 설정하면 모든 색상이 그들의 보색으로 변경된다. 기본값은 0이다.

layerA = new Layer
layerA.invert = 100

layer.grayscale `<number>`

Grayscale converts all colors to gray. Grayscale is defined with a number between 0 and 100 where 100 turns all colors to a shade of gray. The default value is 0.
레이어의 모든 색상을 회색으로 바꾼다. layer.grayscale은 0부터 100 사이의 숫자로 지정하며, 100은 모든 색상을 회색으로 바꾼다. 기본값은 0이다.

layerA = new Layer
layerA.grayscale = 100

layer.sepia `<number>`

Adds a sepia tone to your layer. Sepia is defined with a number between 0 to 100. The default value is 0.
레이어에 세피아 톤을 준다. layer.sepia은 0부터 100 사이의 숫자로 지정하며, 기본값은 0이다.

layerA = new Layer
layerA.sepia = 100

layer.shadowX `<number>`

Defines the shadow direction on the x-axis. A positive value will produce a shadow from the right edge of a layer, whereas a negative value will produce a shadow from the left edge. A visible shadow will only appear if the shadowColor property is also defined.
x축에 그림자 방향을 지정한다. 양수 값은 레이어의 오른쪽 가장자리에 그림자를 생성하고, 음수 값은 왼쪽 가장자리에 그림자를 생성한다. 그림자는 shadowColor 속성이 지정되었을 때만 보인다.

layerA = new Layer
layerA.shadowX = 10

layer.shadowY `<number>`

Defines the shadow direction on the y-axis. A positive value will produce a shadow from the bottom edge of a layer, whereas a negative value will produce a shadow from the top edge. A visible shadow will only appear if the shadowColor property is also defined.
y축에 그림자 방향을 지정한다. 양수 값은 레이어의 오른쪽 가장자리에 그림자를 생성하고, 음수 값은 왼쪽 가장자리에 그림자를 생성한다. 그림자는 shadowColor 속성이 지정되었을 때만 보인다.

layerA = new Layer
layerA.shadowY = 10

layer.shadowBlur `<number>`

Adds a Gaussian blur to the shadowX or shadowY property. shadowBlur is defined with a number. The default value is 0.
shadowX나 shadowY 속성에 Gaussian blur 효과를 준다. layer.shadowBlur는 숫자로 지정되며, 기본값은 0이다.

layerA = new Layer
layerA.shadowY = 1
layerA.shadowBlur = 4

layer.shadowSpread `<number>`

Makes shadows larger in all directions. The shadow is expanded by the given value. Negative values cause the shadow to contract. If shadowX, shadowY and shadowBlur are all set to 0, this will appear as a border. A visible shadow will only appear if the shadowColor property is also defined.
모든 방향에 대해 더 큰 그림자를 만든다. 그림자는 지정하는 값에 의해 확장된다. 음수 값은 그림자를 수축시킨다. 만약 shadowX, shadowY, shadowBlur가 모두 0으로 설정되면, 그림자는 선으로 보인다. shadowColor 속성이 지정되었을 때만 그림자가 보인다.

layerA = new Layer
layerA.shadowY = 1
layerA.shadowBlur = 4
layerA.shadowSpread = 2

layer.shadowColor `<string>`

Sets the color of a layers shadow. The color is expressed as a string in the CSS color format.
레이어 그림자의 색상을 설정한다. 색상은 CSS 색상표의 문자열로 표현된다.

layerA = new Layer
layerA.shadowY = 1
layerA.shadowBlur = 4
layerA.shadowColor = "rgba(0,0,0,0.2)"

layer.borderRadius `<number>`

Rounds the corners of a layer in pixels. To create circles, set the property to a high value (50-100) or divide the layers width/height by two.
레이어의 코너를 둥글게 한다. 원을 만들려면, 50-100 정도 되는 높은 값을 속성으로 주거나 레이어의 width나 height를 2로 나눈다.

layerA = new Layer
layerA.borderRadius = 3

# To create a circle:  
# 원 만들기
layerA.borderRadius = layerA.width/2

layer.animate(options `<object>`)

Returns: Animation object

Start animating this layer. The animation options describe the properties it needs to animate to and how to animate. Running this method will create a new Animation object with the options and return it. You can use the Animation object to for example stop or reverse the animation. For a full description of the animation options see this overview.
레이어의 애니메이션을 시작한다. 애니메이션 옵션의 속성은 움직임을 주고, 어떻게 움직일 것인지를 서술한다.
이 메소드를 실행하면 옵션이 포함된 새로운 애니메이션 객체를 생성하고 반환한다. 이 애니메이션 객체를 사용해서 멈추거나 반전하는 애니메이션 효과를 사용할 수 있다.
여기에서 애니메이션 옵션의 모든 설명을 볼 수 있다.

layerA = new Layer

# Animate the layer to the right  
# 레이어를 오른쪽으로 움직이게 하기  
layerA.animate
   properties:
       x: 100

# Animate multiple properties  
# 애니메이션 속성 여러개 주기
layerA.animate
   properties:
       x: 100
       opacity: 0.5

# Animate the layer to the right in 5 seconds  
# 레이어를 오른쪽으로 5초 동안 움직이게 하기  
layerA.animate
   properties:
       x: 100
   time: 5

# Repeat an animation 5 times  
# 애니메이션 5번 반복  
layerA.animate
   properties:
       x: 100
   repeat: 5

# Start an animation after 5 seconds  
# 애니메이션을 5초 후에 시작하기
layerA.animate
   properties:
       x: 100
   delay: 5

# Animate the layer with a spring curve  
# 레이어에 spring curve 애니메이션 주기   
layerA.animate
   properties:
       x: 100
   curve: "spring(100, 10, 0)"

# Animate the layer with a bezier curve   
# 레이어에 bezier curve 애니메이션 주기   
layerA.animate
   properties:
       x: 100
   curve: "ease-in-out"

# Animate the layer with a custom bezier curve  
# See: http://easings.net/#easeInOutQuint  
# 레이어에 custom bezier curve 애니메이션 주기   
# 보기: http://easings.net/#easeInOutQuint  
layerA.animate
   properties:
       x: 100
   curve: "cubic-bezier(0.86, 0, 0.07, 1)"

# Stop an animation immediately  
# 애니메이션 즉시 멈추기  
animationA = layerA.animate
   properties:
       x: 100
   curve: "spring(100, 10, 0)"

animationA.stop()

# Listen for an animation to start, stop or end  
# 애니메이션 시작하고, 멈추고, 끝내도록 감지하기
layerA.on Events.AnimationStart, ->
   print "Animation started"

layerA.on Events.AnimationStop, ->
   print "Animation stopped"

layerA.on Events.AnimationEnd, ->
   print "Animation ended"

layerA.animate
   properties:
       x: 100

layer.animateStop()

Stop all running animations on this layer immediately.
레이어에서 실행 중인 모든 애니메이션 즉시 멈추게 하기

layerA = new Layer

# Stop an animation immediately  
# 애니메이션 즉시 멈추기  
layerA.animate
   properties:
       x: 100

layerA.animateStop()

layer.animations()

Returns: Array with Animation Objects

Returns all the current running animations for this layer
레이어에서 현재 실행 중인 모든 애니메이션 반환하기

layerA = new Layer

layerA.animate
   properties:
       x: 100

layerA.animate
   properties:
       y: 100

print layerA.animations()
# 출력: [<Object Animation>, <Object Animation>]

layer.isAnimating `<boolean>`

See if a layer is animating. This property is readonly.
레이어의 애니메이션이 있는지 보기. 이 속성은 읽기 전용이다.

layerA = new Layer

layerA.animate
   properties:
       x: 100

print layerA.isAnimating
# Result: True
# 결과: True

layer.on(eventName `<string>`, handler `<function>`)

Start listening for an event on this layer. For a full list of events see this overview.

When an event is called the first argument is the event information. Depending on the specific event this can contain mouse positions, mouse deltas etc. The second argument is always the layer that the event occurred to.

해당 레이어의 이벤트를 감지하기 시작한다. 모든 이벤트의 리스트는 여기에서 볼 수 있다.

이벤트가 첫번째 인자로 주어질 때, 이벤트 정보를 의미한다. 이벤트에 따라 마우스 위치, 마우스의 델타 값 등을 포함할 수 있다. 두 번째 인자는 항상 이벤트가 발생한 레이어를 포함한다.

layerA = new Layer
layerA.name = "Layer A"

layerA.on Events.Click, (event, layer) ->
    print "This layer was clicked", layer.name

# Output: "This layer was clicked", "Layer A"  
# 출력: "This layer was clicked", "Layer A"

layer.off(eventName `<string>`, handler `<function>`)

Stop listening for an event on this layer. For a full list of events see this overview.
해당 레이어의 이벤트를 감지하는 것을 멈춘다. 모든 이벤트의 리스트는 여기에서 볼 수 있다.

layerA = new Layer
layerA.name = "Layer A"

clickHandler = (event, layer) ->
    print "This layer was clicked", layer.name

layerA.on(Events.Click, clickHandler)
layerA.off(Events.Click, clickHandler)

Layers

layer.id <number>

layer.name <string>

layer.x <number>

layer.y <number>

layer.z <number>

layer.width <number>

layer.height <number>

layer.minX <number>

layer.midX <number>

layer.maxX <number>

layer.minY <number>

layer.midY <number>

layer.maxY <number>

layer.point <object>

layer.size <object>

layer.frame <object>

layer.properties <object>

layer.center()

layer.centerX(offset <number>)

layer.centerY(offset <number>)

layer.pixelAlign()

layer.screenFrame <object>

layer.contentFrame()

layer.centerFrame()

layer.backgroundColor <string>

layer.image <string>

layer.visible <boolean>

layer.opacity <number>

layer.clip <boolean>

layer.ignoreEvents <boolean>

layer.force2d <boolean>

layer.originX <number>

layer.originY <number>

layer.perspective <number>

layer.rotation <number>

layer.rotationX <number>

layer.rotationY <number>

layer.rotationZ <number>

layer.scale <number>

layer.scaleX <number>

layer.scaleY <number>

layer.superLayer <Layer object>

layer.subLayers <array>

layer.subLayersByName(name <string>)

layer.addSubLayer(layer <Layer object>)

layer.removeSubLayer(layer <Layer object>)