안녕하세요, 저번에 공 튀기는 예제로 키 프레임을 클릭하여 애니메이션을 주는 방법을 배웠습니다.
이번에는 사방으로 돌아다니는 쥐 애니메이션으로 패스(Path)를 따라서 움직이는 방법을 배우도록 하겠습니다.
1) 파일 > 새 프로젝트 > WPF(.exe)파일로 엽니다.
원을 하나 그려줍니다. 그리고 펜툴로 쥐의 꼬랑지를 쬐그맣게 그려줍니다.
원의 색을 바꿔주려면 오른쪽의 [속성]창에서 바꿔 주시는 건 아시죠? :)
그리고 원을 두개 그려서 쥐의 양쪽 눈을 만들어 줍니다.
2) 쥐의 귀는 사각형과 원을 포갠 뒤에 오른쪽클릭 > Combine > Subtract 를 누르면 남게 됩니다. 이때 두개를 동시선택하더라도
반드시 원을 클릭한 상태에서 실행하셔야 합니다.
그렇지 않으면 위의 그림과 같이 남는 경우가 되거든요. ㄱ-a 잘 생각하시고 하시길 바랍니다[...]
3) 반쪽 원을 하나 더 복사하고 조그만 사각형을 두개 넣어 더 쥐 모양 답게 만들었습니다 :-) 아주 간단한 쥐 이죠? 다들 잘 따라하시리라 믿으며!
3) 쥐의 모양이 완성 되었으면 Ctrl+A를 눌러서 전체선택 후 오른쪽 클릭 > 그룹으로 묶기 > Canvas 클릭하여, 그룹화를
시켜줍니다.
3) 쥐는 잠시 놔두고, 이제 쥐가 돌아다닐 경로를 그려주실 차례입니다.
펜툴 도구를 선택한 상태에서 펜툴로 경로를 아무렇게나 그려줍니다.
저는 밑의 그림과 같이 경로를 만들어놨어요. :)
4) 선이 시작되는 부분의 꼭지점 부분을 쥐를 그룹화 시킨 캔버스의 한 가운데 부분을 맞추어줍니다. (안 맞춰도 상관없어요)
쥐와 경로선을 한꺼번에 선택하시고 오른쪽 클릭 > 패스 > 이동패스로 변환 을 클릭합니다.
그러면 밑의 그림처럼 애니메이션 레이어 창과 함께 녹화상태로 저절로 들어갑니다. 그리고 스토리 보드가 하나 만들어집니다.
5) 재생버튼을 누르시고 확인하시면 애니메이션이 실행이 됩니다, 별 거 한 것 없는데 빨리 만드셔서 시시하시죠? :)
근데 쥐가 약간 이상하게 움직인다는 걸 아실거에요. 몸이 한 방향으로만 그냥 움직이는 것을 보실 수 있는데요.
6) 녹화상태에서 밑에 보이는 노란 타임 바를 좌 우로 움직이면서 쥐가 진행방향쪽으로 머리가 맞게끔, 캔버스를 돌려줍니다.
7) F5를 눌러 완성파일을 윈도우로 열어봅니다. :) 예제파일을 링크시키겠습니다.:)
Mouse.exe
