[Windows 8] Time을 활용한 애니메이션 이용

지난 포스트에서는 시간을 선택하고 그 시간외에도 기타 라이브러리를 활용해서 스톱워치를 만드는 방법에 대해서 언급했었습니다.

 여러분 애니메이션은 무엇이라고 생각하십니까? 정적이지 않은 것... 어떤 정적인 이미지들이 여러시간에 걸쳐서 재생되는 과정을 애니메이션이라고 할 수 있습니다. 결국 애니메이션을 다루는 데 있어서 시간이라는 개념이 필요합니다. 물론 지난 시간에 사용한 DispatcherTimer를 활용할 수도 있겠지만 Windows 8에서는 compositionTarget.Rendering이라는 이벤트 핸들러를 통해서 시간에 따른 애니메이션을 생성할 수 있습니다. 한 번 예시를 통해서 알아봅시다.

 만들고자 하는 예제는 시간에 따라서 글자 크기를 변화시키는 것입니다. Blank App에서 프로젝트를 하나 생성하고 xaml 단에 다음과 같이 구성해줍니다.

 

 

당연한 이야기겠지만 Fontsize를 정의하지 않았기 때문에 초기에는 이 크기가 매우 작습니다. 이걸 코드를 통해서 키워보고자 합니다. cs 코드부로 들어가서 다음과 같성해줍니다. 역시 해당 이벤트도 탭탭을 해주면 자동으로 작성됩니다.

 

 

이벤트를 사용하기 위해서는 이벤트 핸들러 속의 인자가 이벤트 변수로 정의되어야 합니다. 그 안에 시간에 관한 속성이 포함되어 있습니다. 아래와 같이 초단위로 이벤트가 발생하게끔 해주고 매초마다 정의해주기 위해서는 1로 나눈 나머지 값을 보는게 좋겠지요.

 

그다음 scale에 관한 식을 작성합니다. 여러분 마음이겠지만 한없이 커지면 안되기에 조건문을 써서 커졌다가 작아졌다가를 반복해줘야 합니다.

(참고로 지금 보니까 xaml과 cs 코드 사이에 버그가 있어서 xaml 상에서 정의한 name이 바로 cs코드로 바인딩되지 않습니다. cs에서 xaml의 개체 name을 불러오기 위해서는 사전에 build가 진행되어야 합니다.)

그렇게 해서 구한 scale을 txtblk의 fontsize로 정의해주면 되겠습니다.

 

결과는 아래와 같습니다. 생각보다 애니메이션이 꽤 부드럽게 나옵니다.,

 

 

자 조금더 응용을 해서 TextBlock의 색상을 시간에 따라서 바뀌는 과정을 취해봅시다. 이 내용은 한번 전에 나왔었죠. 터치이벤트시에 색상이 랜덤하게 바뀌는 것을 작성해보았습니다. 그걸 그대로 활용하고자 합니다. 우선 바꾸려는 색상에 대한 Name을 정의해줘야 하겠지요?

 

xaml상에서는 바꾸는 부분이 위와 같습니다. 보면 각각의 속성에 접근하기 위해서는 .을 붙여서 관련 속성을 써줘야 합니다. 당연히 색상을 바꿔줘야 하기 때문에 SolidColorBrush로 정의가 되었습니다. 이제 cs코드 상에서 해당 Name을 불러오면 되겠지요. 기존의 코드를 놔둔 상태에서 추가적으로 코드를 삽입하겠습니다. 참 그러고 보니까 색상 정보를 사용하니까 네임스페이스도 다시 추가해줘야됩니다. 제가 알기론 Windows.UI 네임스페이스가 붙으면 될거 같네요.

 

 

그 후에 코드를 아래에 작성해줍니다. grid와 textblock의 색상이 서로 반전되면 좋겠지요.

 

 

결과를 보면 무슨 광고에 나오는 동영상처럼 현란하게 나옵니다.

 

 

물론 그때 사용했던 랜덤함수를 사용하면 더 현란한 모습이 나올겁니다. 아마 이런 걸 활용하면 보통 콘서트에서 나오는 광고판 어플도 생각해볼 수 있지 않을까요? 언젠가는 슬레이트같은 타블렛 들고 응원하는 날도 올지도요..

 물론 팔빠질 겁니다 :)