Events

Event는 여러분이 계속 감시해야 하는 발생 가능한 일을 뜻한다. 화면을 터치하거나 클릭하는 것과 같은 사용자 입력과 애니메이션이 끝나는 것과 같은 일들을 말한다. 대부분의 객체는 Framer내에서 이벤트를 감지한다. 하지만 layer에서 발생하는 대부분의 이벤트에 대해서는 여러분이 감지해야 한다.

이벤트가 호출되면, 첫번째 인자는 이벤트 정보이다. 이벤트에 따라서 달라지는 값으로, 마우스 위치, 마우스 델타 등과 같은 값을 포함한다. 두번째 인자는 항상 이벤트가 발생한 layer이다.

이벤트를 감지하려면 on 함수를 사용한다 :

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

layerA.on Events.Click, (event, layer) ->
    print "Clicked", layer.name

# 출력: "Clicked", "Layer A"

이벤트 감지를 멈추려면 off 함수를 사용한다 :

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

clickHandler = (event, layer) ->
    print "Clicked", layer.name

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

Change events

The "change" event allows you to listen to properties as they're changing. Below is a full overview of properties you can listen for:
"change" 이벤트는 속성이 바뀌는 것을 여러분이 감지하도록 허용한다. 아래는 여러분이 감지할 수 있는 속성들의 전체 리스트이다.

For example, you can get the x position of a layer while it's animating. Note that it'll return the exact, sub-pixel values. 예를 들어, 여러분은 애니메이션이 동작하는 동안 레이어의 x 좌표를 얻어올 수 있다. 이 것은 사실, sub-pixel 값을 반환한다는 것을 기억해라.

layerA = new Layer

layerA.animate
    properties:
        x: 100

layerA.on "change:x", ->
    print layerA.x

The "change" events can be used to link property changes to one another, using Utils.modulate. In the example below, we'll rotate the layer. The returned values are used to move the second layer horizontally.
"change" 이벤트는 Utils.modulate를 이용하여 변경된 속성을 링크하는 데에도 사용할 수 있다. 아래의 예에서 볼 수 있듯이, 우린 레이어를 회전시킬 것이다. 반환된 값은 두번째 레이어를 가로로 움직이는데 사용된다.

layerA = new Layer
layerB = new Layer
    x: 100

# 우리는 layerA를 0에서 180도로 회전시킨다. 
layerA.animate
    properties:
        rotation: 180

# layerA의 회전값이 바뀌었을 때 
layerA.on "change:rotation", ->

    # Use the values to move layerB from 100 to 300
    # layerB를 움직이기 위한 값을 100에서 300까지 사용한다. 
    x = Utils.modulate(layerA.rotation, [0, 180], [100, 300], true)
    layerB.x = x

Events Object

Framer has a global Events object with events that you can listen to. Below is a full overview of the Events object: Framer는 여러분이 감지할 수 있는 글로벌 이벤트 객체들을 가진다.
아래에서 이벤트 객체의 전체 리스트를 볼 수 있다.

Events.touchEvent(event )

Extract the touch event from a given event on mobile.
모바일에 입력된 이벤트로 터치 이벤트를 추출한다.

layerA = new Layer

layerA.on Events.Click, (event, layer) ->
    myTouchEvent = Events.touchEvent(event)

Events.wrap(event )

Wrap a given DOM Element so we can keep track of the events and destroy them when needed. If you want to bind events to arbitrary dom element you should use this.

Events.wrap(window).addEventListener "resize", (event) ->
    print "Page is resizing"