본문 바로가기
Programming/Windows Phone

Hello Phone 프로젝트 마무리.

by 강철 벼룩 2011. 1. 31.
이번 시간에는 지난 시간에 이어 키 프레임들 간의 보정을 변경해 애니메이션을 부드럽게 만들고, 전체 프로젝트를 최종완성해서 실행해 볼것이다.

1. 타임라인에서 회색 원 아이콘 내부를 클릭해 첫 번째 키 프레임을 선택 한다.
프레임을 선택할 때, 디자이너 뷰가 업데이트 되어 UI 요소의 상태를 보여주는데, 이 경우는 배너 텍스트가 거울에 비친것 처럼 표시된다.
이제, [Properties] 창에서, [Easing] 범주 아래 [EasingFunction]을 선택하고, 드롭 다운 목록을 확장해 가능한 기능 목록을 표시한 뒤, [Cubic Out] 기능을 선택한다.

이 특별한 감속/가속 기능은 전환시에 키 프레임에 가까워짐에 따라 감/가속율을 줄인다.

[그림 69] 감속/가속 기능을 적용해 키 프레임간에 상호보간을 수행한다

키 프레임 보간은 속성 변경으로 두 개의 키 프레임 사이의 시간에 걸쳐 애니메이션하는 방법을 기술한다. 감/가속 기능을 전이과정 동안 적용해 키 프레임 보간 값을 수정하면 더 실제같은 애니메이션을 얻을 수 있다.

2. 두 번째 키 프레임에 대해서도 감/가속 기능을 구성하는 이전 단계를 반복한다. 이번에는 [Cubic InOut] 기능을 선택해 저속에서 변화를 시작하고, 점차 속도를 높이다가 최종적으로 마지막 프레임에 가까워짐에 따라 속도를 줄인다.

[그림 70] CubicInOut 감/가속 기능 선택

3. 애니메이션에서 감/가속 기능의 효과를 테스트하려면, 타임라인 위의 [Play]를 누른다.
배너가 고속으로 회전을 시작한 뒤, 텍스트가 반사되어 표시됨에 따라 느려지고, 다시 속도가 오른 뒤에 최종적으로 한 번더 느려지면서 원래의 위치로 돌아간다.

4. 지금까지 배너 텍스트에 대한 애니메이션 스토리보드를 만들었지만, 프로젝트에서는 사용되지 않은 리소스이다. 애니메이션을 실행하려면, 이벤트에 반응해 스토리보드를 트리거해야 하는데, 이 경우는 [Click Me] 버튼을 누를 때 마다 발생해야한다. 이 버튼에 대한 [Click] 이벤트 처리기는 다음의 작업순서로 열어본다.

  • 활성 워크스페이스를 다시 디자인 워크스페이스로 전환한다. [Window]| [Workspaces]| [Design]을 선택한다.
  • [Projects] 창에서, MainPage.xaml 옆에 있는 화살표를 클릭해 코드 숨김 파일을 표시한다.
  • MainPage.xaml.cs를 더블 클릭해 코드 숨김 뷰를 연다.
    애니메이션을 실행하는 이벤트 처리기를 업데이트하려면, 다음 코드 조각을 종료 괄호전에 바로 삽입한다.
  • private void ClickMeButton_Click(object sender, RoutedEventArgs e)
    {
      BannerTextBlock.Text = MessageTextBox.Text;
      MessageTextBox.Text = String.Empty;
      this.AnimateBanner.Begin();
    }


5. [F5]를 눌러 애플리케이션을 빌드하고 윈도우 폰 에뮬레이터에 배포한다. 잠깐 기다리면 애플리케이션이 시작되고 메인 페이지가 나타난다.

6. 텍스트 상자에 약간의 텍스트를 입력한다.

7. [Tab] 키를 한 번 누르면 버튼이 포커스를 받고 버튼 주위에 테두리가 나타난다.

8. 버튼을 클릭하면 배너의 텍스트를 설정하고 버튼의 위치를 이동해 버튼이 눌러졌음을 가리킨다. 버튼을 클릭할 때 배너 텍스트의 애니메이션 실행을 살펴보자.

[그림 71] 윈도우 폰 에뮬레이터에서 업데이트한 애플리케이션을 실행한다.


9. 테스트 완료후, 에뮬레이터 창의 오른쪽 상단 구석의 [Close] 아이콘을 클릭해 종료하고 디버깅 세션을 마친다.

이로써 간단한 Hello Phone 프로젝트를 통해 윈폰 7 프로그래밍의 간결함과 도구들의 멋진 기능을 잠깐 맛 보았다.