본문 바로가기
Programming/Windows Phone

Hello Phone 예제의 배너 텍스트용 애니메이션 생성하기

by 강철 벼룩 2011. 1. 27.


애니메이션은 부드러운 시각적 전환의 시작과 끝 위치를 정의하는 키 프레임을 기반으로 한다. 익스프레션 블렌드에서 애니메이션을 만들려면, 스토리 보드를 만들고, 그 스토리보드에서 타임라인에 키 프레임을 설정해 속성 변화를 표시한다. 예를 들면 0초 표시에 키 프레임을 설정해 아트보드의 왼편에서 사각형의 위치를 기록하고나서, 1초 표시에서 키 프레임을 설정해 아트 보드의 오른편에서 동일한 사각형의 위치를 기록한다. 결과로 나타나는 애니메이션은 초당 사각형의 X와 Y의 속성이 바뀌는 변환에 기반한다. 애니메이션 스토리보드를 실행할 때, 익스프레션 블렌드는 지정된 기간에 걸친 속성 변화에 중간값을 채우고 애플리케이션에 그 결과를 표시한다. 이런 방법으로 아트보드에서 객체가 속하는 모든 속성, 심지어 비 시각적 속성까지도 움직일 수 있다.

이번 시간에는 익스프레션 블렌드에서 스토리보드를 생성해 버튼을 누를 때 마다 배너에서 텍스트를 애니메이션할 것이다.

1. 활성 워크스페이스를 애니메이션 워크스페이스로 전환하자. [Window]|[Workspaces]|[Animation]을 선택한다.
타임라인을  편집할 수 있는 공간을 최대화 하기 위해 창드을 재배치 할 텐데, 워크스페이스를 기본 상태로 돌리고 싶다면, [Window] | [Reset Current Workspace]를 선택한다.

2. 필요한경우, 버튼 컨트롤 템플릿의 편집 영역을 빠져나간다. [Objects and Timeline] 패널에서  FancyButton (Button Template) 옆에 있는 [Scope Up] 버튼을 클릭해 페이지의 요소 트리를 표시한다.

컨트롤 템플릿을 편집할때, [Objects and Timeline] 패널만 그 템플릿에 대한 요소 트리를 표시한다. 페이지의 다른 요소를 편집하려면 현재 영역을 빠져나가야 한다.


3. [Objects and Timeline] 패널에서 New를 클릭해 스토리보드를 생성한다. 이것은 + 표시의 레이블을 가진 버튼으로 해당 패널의 우측 상단 구석에 있다.

[그림 61] 애니메이션 모드의 [Objects and Timeline] 창


4. [Create Storyboard Resource] 대화상자에서, [Name]에 AnimateBanner를 설정하고 [OK]를 클릭한다.

[그림 62] 새로운 스토리보드를 생성해 배너 텍스트를 애니메이션한다.

5. 애니메이션에서 키 프레임을 생성하려면, 먼저 [Objects and Timeline] 패널의 요소 트리에서 [BannerTextBlock] 요소를 클릭해 선택한다. 필요한 경우, 그리드 부모 요소를 확장해 표시한다.

6. 그 다음 타임라인 플레이헤드의 현재 위치를 클릭해 1초의 오프셋으로 드래그한다.

[그림 63] 타임라인 플레이헤드의 타임 오프셋 변경하기

플레이헤드는 타임라인의 맨위에 위치한 노란색 마커다. 페이지의 해당 요소에 대한 모든 변경은 타임라인 플레이헤드의 위치에서 키 프레임으로 기록된다.


7.  다음으로, [Properties] 패널로 전환하고, [Transform ] 범주를 확장한 뒤, [Scale] 변환을 선택한다. X 속성의 값을 -1로 설정한다. 이 변환은 수평 축을 따라서 해당 요소를 반영한다.

[그림 64] 텍스트를  반영하기 위해 스케일 변환을 적용한다.


8. 다시 타임라인 패널로 전환한다.
선택한 타임 오프셋에서 회색 원이 가리키는 새로운 키 프레임을 담고 있는데, 이것은 타임라인 레코딩이 활성화된 상태의 트리에서 요소 변경의 결과다.

[그림 65] 애니메이션 스토리보드에서 새로운 키 프레임 생성하기

9. 이제 타임라인 플레이헤드를 2초의 오프셋으로 변경한다.

10. 다시한번, [Properties] 패널로 전환하고, [Transform] 범주를 확장한 뒤, [Scale] 변환을 선택한다. 다시 X 속성의 값을 1로 변경해 해당 요소를 원래 상태로 복원한다. 두 번째 키 프레임은 이 변경 때문에 스토리보드 타임라인에 표시된다.

[그림 66] [Objects and Timeline] 패널이 삽입된 키 프레임을 보여준다.

11. 디자이너에서 애니메이션을 테스트하려면, 약간의 텍스트를 배너에 추가해야 한다. 우선 해당 패널의 왼쪽 상단에서 AnimateBanner 스토리보드 이름의 왼쪽에 있는 빨간 원을 클릭해 레코딩을 임시로 끈다.

[그림 67] 레코딩 모드 끄기

12. 이제 디자이너 화면의 BannerTextBlock 요소를 클릭하고 오른쪽 버튼을 클릭한 뒤 [Edit Text]를 선택한다. 해당 배너에 대한 적절한 텍스트를 입력하고 [ENTER]를 누른다.

13. 애니메이션을 테스트하기 위해, 타임라인 위의 Play 버튼을 누른다.
해당 텍스트가 가운데 축을 중심으로 어떻게 배너를 수평으로 회전하는지 그리고 전체 애니메이션 주기를 통해 어떻게 이동을 균일하게 하는지 주목하자. 다음 단계에서 키 프레임들 간의 보정을 변경하고 더 자연스러운 애니메이션을 만들어내는 기능을 적용해볼 것이다.

[그림 68] 디자이너에서 애니메이션 실행하기