[Expression Blend WPF강좌] 간단한 애니메이션 만들기- (2 스마일 공 튀기기)

이어서 애니메이션 진행하겠습니다. 저번 강좌에서 공이 어떻게 움직이는 지에 대한 애니메이션 강좌를 했는데요.
그것을 참고로 하여 공을 좀 더 수정해보겠습니다.

1) 애니메이션이 녹화되어 있는 상태에서 반드시 시작한다는 것을 잊지 마세요 :)
타임라인에 찍혀 있는 하얀 키를 클릭하면 옆의 속성 창이 바뀌는 것을 보실 수 있습니다. 옆의 창은 속성 및 가속/감속 같은 그래프가 있는데요.
바로 이 그래프를 이용해서 가/감속을 하게 됩니다. 공이 튀겨서 올라가는 1초/3초/5초의 키를 수정하게 될 건데요.

먼저 1초 키를 누른 상태에서, 그래프 오른쪽 맨 위에 있는 포인트를 다음그림과 같이 휘어줍니다.
공이 처음에 튀겨 올라갈 때는 속도가 빠르다가, 점점 올라가면서 속도가 느려지기 때문에 이런 그래프가 나오게 됩니다. :)

2) 3초와 5초에 있는 키도 1과 같은 방법으로 똑같이 적용시켜 줍니다.



3) 다음은 공이 내려오는 2/4/6초에다가 가속을 시켜주겠습니다.
정점을 찍고오는 공이 서서히 내려오면서 중력에 의해 가속이 되겠죠?
2초의 키를 찍고 오른쪽 속성의 그래프를 이번에는 다음그림과 같이 밑으로 끌어 내려줍니다.

4초와 6초에 있는 키도 같은 방법으로 해주세요.
그리고 재생버튼을 눌러서 확인해봅니다. 어떤가요? 정말 튀기고 있는 것 같으신가요?  
이해를 돕기 위해 만든 것을 파일 첨부 합니다.


 

UntitledProject1.exe

아주 간단하게 애니메이션을 적용해 보았습니다 ;)
블랜드에서의 애니메이션 장점은, 애니메이션 특성별로 지우고 적용시킬 수 있다는 점입니다.
방금 전 만든 애니메이션은 위치가 변경되는 애니메이션인데요.
만약에 여기에 공이 찌그러뜨리는 애니메이션까지 적용을 시켜보면 우리가 여태까지 움직인 유저컨트롤 밑으로 트리가 더 생기게 됩니다.

그래서 내가 움직임을 위 아래가 아닌 좌 우로 변경하고 싶은데 스케일은 변경하고 싶지 않을 경우,
위의 트리 중에 Translation 레이어만 삭제 하면 스케일 애니메이션은 살아있는 상태에서 그것만 삭제가 됩니다.

플래쉬 같은 경우,
두개의 애니메이션을 한 키 프레임에다가 전부 주기 때문에 변경을 하려면 키를 아예 삭제하고 다시 만드는 번거로움이 있었지요. :)