기본 State창에는 아무것도 없습니다.
각 요소들에 대해 설명을 드리기 위해 만들어 놓은 겁니다.
보시면 다 알만 한 것들이지만. 그 중에 낯선 것들에 대해서만 말씀드릴께요.
전환미리보기 설정 :각 상태에 대한 변화를 미리보는 것
FluidLayout 설정 : 뜻 그대로 유동적인 레이아웃을 부드럽게 보여줍니다.
EasingFunction : 전환효과 가속도
FX : 전환효과 모음
컨트롤들에는 기본 내장돼 있는 State들이 있습니다.
그 중 버튼 템플릿 깐 후의 State 기본 모습입니다.
각 상태전환에 따라 나뉘어져 있네요.
자 그럼 State를 직접 만들어 사용해보겠습니다.
Puple색 Rectangle이 좌우로 이동하는 애니메이션을 만들고
버튼 MouseOver, MouseLeave 상태에 따라, 에니메이션을 적용시켜보겠습니다.
상태창 - 상태 그룹 추가 - 상태 추가의 흐름입니다.
상태 2개 만드시고 Left, Right로 이름 변경
Right 상태 - rectangle Horizontal right로 변경하고 전환지속시간을 0.4초로 설정
코드보시면 Left에는 아무 값이 없는데, 그건
Base상태랑 동일하니, 따로 설정할 필요가 없어서 그렇습니다.
Left, Right 각각 눌러보시면, 누르는데로 재깍재깍 왼쪽 오른쪽 변화겠죠.
그런데, 이상합니다.
0.4초의 전환지속시간을 주었는데, 반영이 안됩니다.
이럴 때, 전환 미리 보기 설정 하고 다시 확인
해보니 어떤가요?
0.4초 후에 오른쪽에서 뿅 하고 나타날 뿐입니다.
우린 왼쪽에서부터 가길 원했던건데 말이죠~
바로 이때, FluidLayout 설정하고 다시 확인
오오 잘됩니다.
잘 되는데, 너무 정직하게 가죠~
텐션을 주기위해 가속도를 설정합니다.
EasingFunction - Circle Out 하고 확인해보세요.
이렇게 해서, 간단한 State가 완성됐지만, 실행해서 확인할 수가 없죠.
이럴 때 Behavior를 사용합니다. 사용법은 다음시간에 포스팅하도록 하겠습니다.
EasingFunction, Fx에는 세부 타입이 많으니, 한번 씩 해보세요.
동영상에도 몇 개 해보겠습니다.
0 개의 댓글:
댓글 쓰기