이어서 진행하도록 하겠습니다.
저번 강좌까지 했던 작업은 메뉴버튼 클릭 시 접혀있던 서브메뉴가 나오도록 하기 위한 형태를 만들었고요.
이번시간에는 State 설정에 Projection 애니메이션을 추가하여 메뉴가 움직이도록 진행해 보겠습니다.
1) 저번시간까지 준비한 작업을 가지고 옵니다.
① 상태에서 그룹 State를 클릭하여 그룹을 만들고
② 다시 폴더 모양을 클릭하여 그룹안에 State를 두개를 추가합니다
③ 두가지의 상태를 만들어줍니다. 하나는 Menu로 돌아오기 위한 애니메이션과 SubMenu로 가기 위한 애니메이션입니다. 그룹이름은 자신이 임의로 지정해주어도 됩니다. 저는 MenuGroup으로 했습니다.
2) ① SubMenu State을 클릭하고
② 움직일 대상 Stack Panel을 선택한다음
③ 속성에서 Projection의 속성값을 다음과 같이 지정하여 줍니다. 완전히 접혀져 있던 서브가 '0'이라는 값을 주면서 펴지는 것을 녹화를 했습니다. ④번과 같이 보여져야 합니다.
(State에 대한 애니메이션을 더 자세히 알고 싶으시면 예전강좌에 나와있습니다, 참고하시길 바랍니다)
3) 이번에는 btnMenu란 이름을 가지고 있는 메뉴 버튼을 접어줄 차례입니다.
① 마찬가지로 subMenu라는 State에 녹화를 하시고
② 메뉴버튼 레이어 선택 ③ Projection의 Y축 회전값을 지정해 줍니다. 그러면 메뉴가 접혀지는 모습이 보이는데요
아예 안 보일때까지 값을 주도록 합니다. 저는 94.5까지 하니까 아예 안보이게 됩니다.
이렇게 해서 SubMenu의 State를 설정해주었습니다.
다음으로는 이제 돌아가기 위한 State를 설정해주도록 하겠습니다.
4) ① 이번에는 Menu State를 선택하시고, ②메뉴 레이어 버튼을 선택하시고 ③ 회전의 X축을 0->1->0으로 설정값을 찍어주어 오른쪽의 고급속성 박스가 하얗게 나오도록, ④번처럼 키 프레임이 찍히도록 합니다.
이렇게 하는 이유는 키프레임을 찍어주어야 State를 실행하면 돌아오기 때문입니다.
5) 마찬가지로 Stack Panel의 애니메이션도 키 프레임을 남기기 위해 정해주도록 합니다.
화면상에서는 아무런 변화가 없는 것 같지만 키프레임을 찍어줌으로 돌아올 위치를 정해주는 것이기 때문에
Y축 값을 반드시 ③번 처럼 고급속성이 흰색이 칠해지도록 해줍니다.
이렇게 해서 상태는 다 만들었습니다.
6) 상태에서 상태로 바뀔 때 변환 시간과 가,감속의 설정을 하단의 그림처럼 설정해줍니다.
저는 1초동안 State가 변하도록 했고 실버라이트에서만 제공하는 Easing Function을 Circle inout을 설정했습니다.
7) Base를 클릭하여 녹화상태에서 벗어나시고,
btnMenu를 클릭하였을 때와 StackPanel 안의 btnBack 버튼을 클릭하였을때 이벤트가 실행되도록 코드를 작성해줍니다. (State이벤트 강좌 참조하시면 더욱 자세한 설명이 있습니다)
8) 이벤트를 설정해 주시고 다음과 같이 코드를 적어줍니다. btnMenu를 클릭하였을 때는 -> SubMenu State를 걸어야 합니다. Menu State를 걸어주면 아무런 적용이 되지 않을 것입니다.
9) 잘 실행이 되시나요?
하단에 예제로 만든 결과물에 버튼 스타일과 배경색만 넣어서 바꾸어보았습니다.
이렇게 실버라이트에서 Projection이라는 속성 기능을 통해 원근감처럼 보이게 메뉴가 접히는 것을 확인하셨습니다.
그럼 다음강좌때 뵙도록 하겠습니다.
