프로젝트 타입 : WPF
앞으로는 실버라이트 강좌와 WPF 강좌를 동시에 진행할 것 같아서 프로젝트를 분류해야 할 것 같습니다. 오늘은 앞서 말씀드린 시리즈중 첫번째, 모션패스를 이용한 애니메이션에 대해서 알려드릴께요.
WPF에서는 객체가 패스를 따라 애니메이션이 일어나는 모션패스를 지원합니다. 방법은 매우 간단해요. 먼저 WPF 프로젝트를 생성합니다.
 |
그리고 프로젝트에 하늘 배경의 이미지를 추가합니다. (Add Existing Item 으로 추가)
 |
이미지를 추가했다면 종이비행기를 그려줄 차례입니다. 종이비행기는 패스를 이용하여 그려주면 됩니다. :)
 |
종이비행기를 하나의 레이아웃으로 묶어준 뒤 그리드 위에 놓아줍니다. 다 되었다면, 이번에는 펜툴을 이용하여 패스를 그려주도록 합니다. 이 패스는 종이비행기가 날아가는 곡선이니 예쁘게 그려주세요. ^^
 |
그런 다음 다 그린 곡선모양의 패스는 투명하게 처리하기 위해서 Fill과 Stroke를 모두 No Brush로 처리합니다.
 |
그리고 나서 스토리보드를 하나 생성한 후에 종이비행기와 패스를 모두 선택하고 마우스 오른쪽을 눌러 Path > Convert to Motion Path 항목을 선택하여 실행해보면 패스를 따라 움직이는 것을 확인할 수 있습니다.
 |
그런데 속도가 굉장히 빠르게 움직이는 것을 느끼실거에요. 모션패스의 기본 타임라인 길이가 2초로 생성되기 때문입니다. 다음과 같이 모션패스를 선택하고 드래그하여 길이를 원하는 만큼 늘여주도록 합니다.
 |
마지막으로 뭔가 이상한것을 눈치채신 분이라면 대단한 눈썰미!! 종이비행기가 자연스럽게 날아가야하는데 같은 각도를 유지한채로 이상하게 날아가는 것을 알아채셨을 거에요. 타임라인에 맞추어 적절한 키프레임을 생성하고 종이비행기의 앞부분이 날아가는 각도에 맞추어 회전하면서 날아가도록 해줍니다.(조금 노가다죠? ^^;)
 |
자, 다 완성 되셨나요? ^^ 이로써~ 날아가는 종이비행기가 다 만들어졌습니다!! F5를 눌러 실행하면 종이비행기가 날아갈거에요. (아마 스토리보드를 만들었을 경우에 윈도우가 로드될 때 바로 실행되게끔 하는 트리거가 생성되었을 겁니다. 이 부분은 다음시간에 설명하겠습니다) 잘 안되시는 분들은 소스를 첨부하도록 할테니 참고하시기바래요. 벌써 밤이 깊었네요. 오늘도 이렇게 열정을 불태우시는 분들~! 화이팅!!
MotionPath1.zip
