[22] State - 전환 애니메이션 바꾸기
상태 전환 애니메이션 속성 바꾸기
상태 전환할때 보여지는 애니메이션을 변경할 수 있습니다. 각각의 상태에 따로 적용할 수도 있고 공통으로 효과를 주고 싶으면 states.animationOptions 속성값을 이용하면 됩니다. 이 속성값을 통해 애니메이션의 설정들을 모두 사용할 수 있고, 상태값 전환시에 사용되는 애니메이션 효과를 지정할 수 있습니다.
공통 애니메이션 효과 적용하기
프레이머에서 상태에는 기본적으로 공통으로 사용하는 애니메이션이 적용되어 있습니다. 레이어의 states.animationOptions 값을 변경하면 공통으로 사용되는 애니메이션을 다르게 바꿀 수 있습니다. 아래 소스코드처럼 레이어에 공통 애니메이션을 바꿔보겠습니다.
layerA.states.animationOptions =
time:3
curve: "spring(100, 10, 0)"
<그림. 상태의 공통 애니메이션 변경>
이렇게 소스코드를 추가하면 상태가 바뀔 때 기본으로 사용하는 애니메이션이 변경됩니다. 또한 여기서 사용된 time, curve 말고도 애니메이션 속성은 모두 사용가능합니다.
상태별로 애니메이션 효과 변경하기
각각의 상태에 애니메이션을 변경하기 위해서는 states.switch() 함수의 바뀔 상태값 뒤에 애니메이션에 대한 속성을 적어주면 됩니다. 이전 예제에서 switch() 구문안에 아래의 소스코드를 추가해보세요.
layerA.states.switch(“a”, curve: "spring(400, 30, 0)")
<그림. 상태에 애니메이션을 추가>
그러면 a로 변경될때는 탄력있는 애니메이션으로 전환되게 됩니다. 물론 다시 ‘default’ 상태로 돌아갈때는 기본 애니메이션이 적용됩니다.
여기서 curve는 애니메이션에서 가속과 감속을 의미합니다. 이 값을 조절하면 여러 애니메이션 느낌을 낼수가 있습니다. 그중 spring은 스프링처럼 탄력있는 애니메이션입니다. 애니메이션에 대해서는 따로 설명하고 있으니 참조하시기 바랍니다.
이제 ‘default’에는 다른 애니메이션을 적용해볼까요? 먼저 이전시간에 switch를 이용한 상태별 전환에 사용했던 소스코드를 다시 추가해보겠습니다.
<그림. 상태 a 와 default 를 switch로 전환>
소스코드를 아래 처럼 변경합니다. 상태 a 와 상태 default에 각각 다른 애니메이션을 삽입합니다.
layerA.onClick (event, layer) ->
if layerA.states.current.name == "default"
layerA.states.switch('a', curve: "spring(400, 30, 0)")
else
layerA.states.switch("default",time:3,delay:0.5)
<그림. ‘default’ 상태에 애니메이션 값 추가>
자 다시 실행해보니 어떤가요? delay 값을 추가해서 클릭하자마자 애니메이션이 실행되지 않고 0.5초후에 3초동안 길게 애니메이션이 되는것을 볼 수 있습니다.
