Windows Phone 7 에서 Animation 효과주기.

앞에서 UI에 디자인까지 입혀봤고, 이번에는 윈폰7의 강력한 기능중 하나인 애니메이션 효과를 줘봅니다. 보시면 아시겠지만 진짜 간단합니다.
앞의 예제가 텍스트 박스에 글자를 넣고 클릭하면 위의 텍스트가 바뀌는 시나리오 였는데, 이번에는 클릭하면 위의 글자가 바뀌면서 뺑글 돌아가는 형태로 바꿔봅니다.

역시 디자인을 변경하는 것이기 때문에, Expression Blend 4에서 작업을 합니다.
모드를 디자인 모드에서 애니메이션 모드로 바꾸면 Objects and Timeline에 각 객체별 타임라인이 나옵니다. (마치 동영상 편집기 처럼요)

이제 애니메이션 효과를 줘봅니다. 배너 글자 컨트롤인 BannerTextBlock을 선택한후에, 레코딩 모드로 전환하고, TimeFrame을 1초로 선택한후에, x축을 -1로 세팅합니다. 다음 2초를 선택한후 x축을 다시 0으로 복구합니다.
즉 0초에는 제대로 표현하다가 1초에는 x축을 180도 회전 시키고, 2초에는 다시 0으로 세팅합니다. 이렇게 되면 0~1초 사이에 180도 돌고, 그다음 1~2초 사이에 다시 180도가 돌아서 2초동안 텍스트를 360도 돌리게 됩니다.

이렇게 지정한 애니메이션은 바로 개발툴에서 테스트 해볼 수 있습니다. 아래 처럼요.



자아 이렇게 개발이 끝난 애플리케이션을 그럼 테스트 해봅시다.



이렇게, 윈폰7 개발환경에서는 다이나믹한 애니메이션 효과를 주는게 무지 쉽습니다. 아주 간단한 예만 했지만, 애니메이션 속도, 화면 전환할때 마치 페이지 넘기는 것과 같은 효과를 이렇게 클릭 몇번만으로 자유롭게 줄 수 있습니다.

앞에 디자인 UI적용 부분과, 이번에 애니메이션 처리 부분을 봤는데, 이정도면 상당히 높은 합격점을 주고 싶습니다. 스마트폰이면 스마트폰에 알맞는 멋진 UI가 있어야겠지요.