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" 이벤트는 속성이 바뀌는 것을 여러분이 감지하도록 허용한다. 아래는 여러분이 감지할 수 있는 속성들의 전체 리스트이다.

이름 설명
"change:x" 새로운 x 좌표
"change:y" 새로운 y 좌표
"change:point" 새로운 x 혹은 y 좌표
"change:width" 새로운 너비(width) 값
"change:height" 새로운 높이(height) 값
"change:size" 새로운 너비(width) 혹은 높이(height) 값
"change:frame" 새로운 x, y, 너비(width) 혹은 높이(height) 값
"change:rotation" 새로운 회전(rotation) 값
"change:borderRadius" 새로운 굴곡(borderRadius) 값
"change:currentPage" 새로운 현재 페이지 값
"change:style" 새로운 style 선언
"change:html" 새로운 html 선언
"change:subLayers" subLayer를 추가하거나 삭제하기
"change:superLayer" superLayer를 추가하거나 삭제하기

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는 여러분이 감지할 수 있는 글로벌 이벤트 객체들을 가진다.
아래에서 이벤트 객체의 전체 리스트를 볼 수 있다.

이름 설명
Basic
Events.Click 클릭이나 터치 (모바일에서 딜레이 없음)
Events.TouchStart 클릭/터치 시작
Events.TouchMove 터치 움직임이나 마우스 드래그
Events.TouchEnd 클릭이나 터치 종료
Mouse
Events.MouseOver 마우스 움직이기
Events.MouseOut 마우스 멈추기
Animation
Events.AnimationStart 애니메이션 시작
Events.AnimationStop 애니메이션 멈춤
Events.AnimationEnd 애니메이션 종료 (reached end point)
Dragging
Events.Move 레이어가 움직인다
Events.DragStart 드래그 시작
Events.Drag 드래그 움직이기
Events.DragEnd 드래그 종료
Events.DragAnimationDidStart Did start momentum/bounce animation
Events.DragAnimationDidEnd Did end momentum/bounce animation
Events.DirectionLockDidStart Did start lock direction.
Scroll
Events.Move 레이어가 움직인다
Events.ScrollStart 스크롤 시작
Events.Scroll 스크롤 중
Events.ScrollEnd 스크롤 종료
Events.ScrollAnimationDidStart Did start momentum/bounce animation
Events.ScrollAnimationDidEnd Did end momentum/bounce animation
States
Events.StateWillSwitch 새로운 상태로 전환할 예정 About to switch to a new state
Events.StateDidSwitch 새로운 상태로 전환됨 Just switched to new state

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"