[Blend for windows] Working with the Windows 8 Animation Library

 

 

이제 blend for windows에서 다루는 강의도 이걸 포함해서 2개정도 남았습니다. 이것만 완성된다면 그래도 디자인 템플릿을 수정하는데 있어서 어려움은 거의 없을 거라고 생각합니다. 이번에 할 내용은 Windows 8 개발툴에 내장되어 있는 애니메이션 효과를 이용해서 조금더 앱을 풍성하게 만드는 방법을 알아보고자 합니다. 물론 이전에도 말했다시피 저는 제가 만든 프로젝트로 합니다.( 참고로 샘플 프로젝트가 있긴한데 실행이 안되는 거 같습니다. 그냥 이런 기법이 있다 라고만 아시면 좋을 거 같네요.

 

자 우선은 State 탭은 지난번에도 보신거지요? 거기서 Base 위에 있는 버튼중 왼쪽 버튼을 누르시면 새로운 VisualStateGroup이 생성됩니다.

 

 

이름은 BackgroundState라고 지어주면 좋겠지요. 지금 활성화되어 있는 State는 App이 실행되었을때 시점에 관한 State change를 결정짓는 부분입니다. 그래서 예시도 보이겠지만 전체적인 State가 View가 변하는 시점에 대해서 언급되고 있습니다. 말그대로 이것에 관한 임의의 Sate를 하나 생성하겠다는 겁니다. 물론 여기에도 앞은 state처럼 새로운 그룹을 추가하는 방법이 있고 똑같습니다. 그래서 다음과 같이 생성해줍니다.

 

 

당연히 Inactive는 비활성화되었을때, Active는 활성화되었을때에 대한 State가 되게 됩니다. 일단은 위처럼 하고 Inactive가 선택된 상태에서 이미지를 안보이게 하고, Active가 되게 하면 딱 뜨게 한다는 것이죠. 물론 제꺼에서는 이상하게 나올 겁니다. 그도 그럴것이 아직 배경색에 대한 처리가 안되어 있기도 하고 후에 만든 이미지에 그래디언트를 적용해서 만든것이기 때문에 갑자기 사라지면 뭔가 어색할 겁니다. 하지만 일단 해보겠습니다.

 

 

이젠 Inactive가 선택된 상태에서 Properties 창을 보면 위와 같이 사전에 정의가 되어 있는 Theme Animation가 나열됩니다. 이중에서 두번째 있는 FadeOut에 관한 애니메이션 라이브러리를 적용시켜 봅니다.

 여기까지 했으면 다음에 해야 될 작업이 다시 Active가 되었을때의 결과이겠지요. Active를 선택하고 바로 이전에 설정했던 Theme Animaion에서 FadeIn을 선택해봅니다. 이제 Active에는 이미지가 FadeIn되는 동작을, Inactive에선 FadeOut이 되는 동작이 저장되어 있을 겁니다. 다음으로는 이 프로젝트의 코드부인 GroupedImagesPage.xaml.cs 파일에서 이 state를 써먹어야 합니다.

자 우선은 State에 따른 변화를 알아야 할 것이고 이를 위해서는 일정 시간후에 Inactive에서 Active가 되는 것이 필요할겁니다. 거기서 나오는게 Timer가 될것이고 그걸 Initialize 부분에서 처리해줍니다. 블랜드 내에서 코드를 수정할 수 있지만 조금더 쉽게 접근하기 위해서 저는 코드 수정을 VisualStudio 2012에서 진행했습니다. 그래야 VS 2012에서 제공하는 intelisense를 사용할 수 있습니다.

 

 

위에서 언급한 내용을 코드로 구현해봅니다.

 

코드를 잠깐 소개해드리자면 Time을 잴 수 있는 Timer를 하나 만들고 2초마다 한번씩 움직이게끔 Tick 이벤트를 생성합니다. 그리고 이전에 만들었던 VisualStateGroup은 VisualStateManager라는 이름으로 접근할 수 있게 됩니다. 거기서 FadeOut을 선언한 Inactive state가 실행되게끔 해줍니다. 그러면 동작은 이 App이 실행되고난 바로에 이 Inactive State에 있게 되겠지요. 우리가 확인할 것은 이제 이 GroupedItemsPage 창이 실행될때쯤 FadeIn으로 선언한 Active state로 변하게 해주면 되겠지요. 그럼 다음과 같이 작성해주면 됩니다.

 

 

코드 작성도 끝났으니 실행을 해보겠습니다. Visual Studio상에서 저장하고 blend로 돌아와서 실행시켜봅니다. 결과는 다음과 같습니다.

 

 

그래도 생각보다 그라데이션 한 부분이 깔끔하게 잘 나오는 것 같네요. 이렇게 내장된 애니메이션 라이브러리 기능을 활용해서 조금더 화려한 앱 동장을 보여줄 수 있는 것이 특징이고 이걸 Blend에서만 할 수 있다는게 windows 8 개발에 있어서 큰 장점으로 작용하는 것이지요.