WP7 개발 기초 - 애니메이션 효과

지난 포스팅에선 DispatcherTimer를 사용해서 1초마다 초침이 움직이는 것을 확인할 수 있었습니다.
하지만 시계가 1초에 한번씩 움직이는 시계만 있을까요? 어쩌면 1초에 6도씩 부드럽게 움직이는 시계도 있을 수도 있겠지요. 이런 효과를 다른 말로는 애니메이션이라고도 합니다.

xna를 개발해보신분이라면 잘 아시겠지만 윈도우폰 7의 화면 갱신 속도는 1초에 30번씩 깜빡입니다. 다른말로는 1초에 30frame 씩 표현할 수 있다는 것이지요. 보통 영화의 fps가 24프레임임을 감안한다면 30프레임정도가 나와도 충분히 부드러울 겁니다. 실버라이트상에서는 이 갱신 주기와 동기화된 타이머가 하나의 이벤트로 존재합니다. 같이 예제를 하면서 보시지요.

 
일단 RotatingText라는 이름으로 WP7 프로젝트를 엽니다. 그러고는 xaml상에 다음과 같이 칩니다.

 
우선 Margin이나 Width가 정해지지 않았기 때문에  이 코드는 가운데 박힐 겁니다. 그리고 rotate라는 이름을 가진 RotateTransform 이벤트가 C#코드상에서 호출이 될 것이고요.
 

뭐 별다른 게 못느껴집니다. 이제 코드를 구성해야 합니다. 
이번 포스팅에서 새롭게 쓰는 이벤트는 바로 CompositionTarget.Rendering이라는 겁니다. 

 
앞에서 이야기했던 것처럼 윈폰상의 갱신주기와 동기화된 타이머라는 것이 바로 이 CompositionTarget이라는 겁니다.  이 이벤트내에서는 Timespan 속성을 가진 개체를 얻을 수 있습니다. 뭐 그런데 책에는 OnCompositionTargetRendering이라고 해서 뭔가 장황하게 설명이 되어 있는데 그냥 이벤트 핸들러로 자동 생성해줘도 결과는 똑같은거 같습니다. 이벤트 핸들러의 내용은 다음과 같습니다.
 

우선 시작시간과 윈폰의 갱신 주기를 동기화 시킨 후 그 남은 시간을 측정해서 초에 따라 각도가 변하는 것을 확인할 수 있습니다. 역시 xaml상에서 x:name으로 선언한 rotate가 등장해서 RenderingTransform시 Angle을 변하게끔 하고 있네요.

분명 지난번 HybridClock에서는 1초에 초침이 6도씩 움직였습니다. 이번은 어떨까요? 결과물입니다.

일단 위와 같이 조금 에니메이션 효과를 주는 것에 대해서 다뤄봤습니다. 참고로 2초 주기로 한바퀴를 움직이는 겁니다. 코드에서도 보다시피 TotalSecond가 2가 되어야 나머지가 0으로 돌아가는 것이지요.