안녕하세요. ^_^ 블렌드 포스팅은 정말 오랜만이네요..흐흐.. 오늘은 가속도를 이용하여 통통 튕기는 공을 만들어 보겠습니다.

1. 먼저 도형툴을 이용하여 공을 그려주세요.



2. 그리고 그림자가 될 부분도 그려줍니다.


3. 공과 그림자를 다 만들었다면 스토리보드를 하나 생성합니다.


4. 0초, 1초, 2초, 3초, 4초가 되는 시점에 키프레임을 각각 생성합니다.


5. 1초 지점에 플레이헤드를 놓고 공을 아래로 이동시킵니다.


6. 공의 바닥에 닿으면서 살짝 찌그러지는 효과를 주기 위해서 Y스케일을 0.9로 해줍니다.


7. 떨어지면서 공의 가속도가 붙도록 해야겠죠? 키프레임을 선택하고 KeySpline 곡선을 이용하여 가속도를 줍니다.


8. 2초가 되는 시점에 플레이헤드를 놓고 공의 위치를 원래의 위치로 이동시킵니다.


9. 이번에는 공이 위로 튀어오르면서 가속도가 떨어지게 됩니다. 키프레임을 선택한 후 KeySpline 곡선을 다음과 같이 조절합니다.


10. 역시 찌그러졌던 공의 모양도 원래대로 돌아와야 하니 Y스케일을 다시 1로 만들어줍니다.

11. 3초, 4초, 5초가 되는 시점에 위와 같은 작업을 반복합니다.

12. 공에 대한 애니메이션을 다 만들었다면, 이번에는 그림자에 대한 애니메이션을 만들어야합니다. 공이 내려왔다가 튕겨 올라갈때의 느낌을 살리기 위해서요 ^_^ 0초에 플레이헤드를 놓고 X, Y의 스케일을 0.5, 0.5로 만들어줍니다. 공이 공중에 있을때는 그림자가 작게 나타나고 공이 지표면에 가까워질수록 그림자는 크게 나타나겠죠?



13. 1초가 되는 시점에 그림자의 X, Y 스케일을 다시 1,1로 해줍니다. 2초, 3초, 4초에도 마찬가지로 스케일 변경을 해 주고, 가속도효과는 공과 같이 해줍니다.


14. 스토리보드 작업을 완료하고 스토리보드를 실행하는 코드를 추가하도록 합니다.
 

namespace Ball

{

        public partial class Page : UserControl

        {

               public Page()

               {

                       // Required to initialize variables

                       InitializeComponent();

                       sb_Animation.Begin();

               }

        }

}


15. 저의 예제처럼 끊임없는 애니메이션을 넣고 싶다면 스토리보드를 선택 후 반복 횟수를 Forever로 해주세요 :)


자~ 이렇게 공이 통통 튕겨집니다. ^_^


Posted by 짱묜
안녕하세요. 짱묜입니다. ^-^

오늘은 가속도에 대해서 다뤄볼까 해요. 제가 이전에 튜토리얼 강좌를 진행하면서 빼먹은 부분이었던것 같네요. 굉장히 쉬운 내용입니다~ ㅎㅎ

블렌드에서 가속도를 줄 수 있는 부분은 2곳이 있습니다. 하나는 키프레임에서 마우스 오른쪽 메뉴를 눌러 Ease In(빠르게 시작)Ease Out(느리게 시작) 을 조절해 주면 객체가 이동할 경우 가속도가 더해지거나 덜해집니다. % 값이 클수록 크게 작용합니다.



예를 들어 키프레임의 앞부분에 Ease In 값을 주면 빠르게 시작합니다. Ease Out 에 값을 주면 역시 느리게 시작하겠죠?

Ease In/Ease Out 은 기본적인 수치가 정해져 편리하게 쓸 수 있습니다. 만약 좀 더 세밀하게 가속도를 조절하고 싶다면 Easing 패널에서 KeySpline을 이용하는 것입니다. 이 패널은 어떻게 찾느냐..네 저도 처음에 한참 찾았던 아픈 기억이 나네요 T^T;; 이녀석은 바로 보이지 않습니다. 오브젝트를 클릭하고 특정 키프레임을 콕~눌러주세요.



그러면 오른쪽에 나타날것입니다..하하 왜이렇게 숨어있는겨~!!



Common Properties 패널의 Value 값은 객체가 이동할 좌표값입니다. 저는 객체가 X축으로 450 이동하게끔 해놓았어요. 그리고 그 아래에 KeySpline 곡선이 나타나는데요..처음에 열면 반비례 모양의 직선으로 나타나있습니다. 아무값도 들어있지 않기 때문이죠. 그러나 저기 노란 핸들러를 드래그하여 이동해주면 KeySpline 곡선이 변형됩니다. 수치로 직접 입력할 수도 있구요.. 간단하게 말로 설명하자면 볼록한 부분은 느리게, 오목한 부분은 빠르게 움직입니다. 위의 그래프를 풀어보면 처음엔 느렸다가 갑자기 빨라지는 애니메이션이 연출되겠네요 ^_^;

아래의 예제는 똑같은 시간(1초)동안 다른 가속도로 움직이는 애니메이션 입니다. 오토바이를 클릭하여 차이를 느껴보세요~(음..느끼라니까 뉘앙스가 좀..- -;;) 원상태로 돌아가는 기능은 없습니다..-_-불편하더라도 지나간 녀석을 다시 눌러주세요.

Posted by 짱묜