PathListBox를 이용해 모션 구현하기

 

 

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)

곡선을 따라 움직이는 애니메이션을 만들 때 사용하는 pathListBox를 소개합니다.

 

컨트롤에서 pathListBox를 가져옵니다.

 

 

화면으로 가져왔습니다.

 

 

pathListBox가 레이어에 활성화 되고 오른쪽 LayoutPanel에 패스를 설정할 수 있는 창이 생깁니다.

 

 

애니메이션을 위한 객체가 따라갈 패스를 그려줍니다.

pathListBox의 자식객체에 넣지 않아야 합니다!

 

 

다음과 같이 직선이 아닌 둥근모양의 선을 그렸습니다.

 

 

과녁모양의 버튼을 눌러 내가 패스 레이어를 선택합니다.

내가 선택한 패스가 애니메이션의 모션패스가 됩니다.

 

그리고 pathListBox의 자식레이어로 내가 그려 넣기 원하는 원모양을 넣습니다.

그러면 화면에서 알아서 패스의 시작점에 원을 갖다 놓습니다.

 

 

 

 

 

오른쪽에 Start를 0%로 놓으면 시작점, 100%로 놓으면 내가 설정한 패스의 끝으로 가게 됩니다.

자 그러면 애니메이션을 만들어 보도록 하겠습니다.

 

 

+ 버튼을 눌러 애니메이션을 만들 스토리보드를 추가합니다.

그리고 Storyboard1이라고 이름을 정하고 ok버튼을 누릅니다.

 

 

pathListBox가 0초 일때는 Start가 0%

 

 

1초 뒤에에는 100%가 되도록 키프레임을 찍어줍니다.

 

 

1초의 키프레임을 마우스로 클릭하면 오른쪽에 애니메이션의 가속도를 설정할 수 있는

이징그래프가 뜹니다.

 

 

저는 점점 가속도가 빨리 붙는 Quintic In을 선택했습니다.

 

 

스토리보드를 빠져나옵니다.

 

 

처음에 그렸던 패스의 모습이 보이지 않기 원하기 때문에

투명도를 0으로 설정합니다.

 

 

 

내가 원하는 둥근 패스를 따라가는 애니메이션을 만들었습니다.

빌드를 하면 애니메이션이 아무런 움직임을 보이지 않는데요.

애니메이션이 보일 수 있도록 설정해 주어야 합니다.

 

 

<애니메이션이 로드 되었을 때 움직이도록 설정하는 방법>

애니메이션을 만든 후 ControlStoryboardAction을 꺼냅니다.

 

 

LayoutRoot아래에 ControlStoryboardAction 비헤이비어를 넣습니다.

 

 

비헤이비어를 설정할 수 있도록 오른쪽에 창이 뜹니다.

Loded(로드) 되었을 때 Storyboard1(애니메이션 스토리보드이름)가 Play(실행) 되어라.

이렇게 설정을 해주었습니다.

 

 

Project > Run Project 또는 F5버튼을 눌러 실행시켜 봅니다.

 

 

-둥근 패스를 따라 원이 움직이는 것을 확인할 수 있습니다.