13.
다시 1.5가 되는 시점에 플레이헤더를 놓고 오브젝트의 위치를 10보다 조금 높게 이동시킵니다. 또는 Y 좌표값 105을 입력합니다.



14.
그리고 모든 오브젝트의 키프레임을 선택한 후(11번과 같이) 가속도를 줍니다. y2 1을 입력.

15. 모든 오브젝트를 선택한 후 1.9가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값 135를 입력합니다.


16. 1.9
지점의 키프레임을 선택한 후 가속도를 줍니다. x2의 값에 1를 입력합니다.

17. 모든 오브젝트를 선택한 후 2.2가 되는 시점에 플레이더를 놓고 아래로 이동시킵니다. Y 좌표값 110을 입력합니다.

18. 그리고 모든 오브젝트의 키프레임을 선택한 후 가속도를 줍니다. y2 1을 입력합니다.

19. 첫번째 오브젝트 에서 두번째부터 마지막까지의 키프레임을 모두 선택한 후(다중선태은 shift키 이용) 0.1 앞으로 당깁니다.



20. 두번째 오브젝트부터는 1번째 키프레임을 제외한 모든 키프레임을 모두 선택하여 0.2 씩 뒤로 시간차를 줍니다.

21. CS 파일을 열어 페이지가 로드될 때 스토리보드를 호출하는 코드를 삽입합니다.

namespace Sample2

{

             public partial class Page : UserControl

             {

                           public Page()

                           {

                                        // Required to initialize variables

                                        InitializeComponent();

 

            this.sb_TextAni.Begin();

                           }

             }

}


F5르 눌러 실행하도록 합니다. 생각했던데로 잘 튕겨지나요? ^_^


 
Posted by 짱묜
어제에 이어서~ 교육때 썼던 예제를 하나 더 올리도록 하겠습니다. 저번에 가속도를 이용한 공 튕기기를 했었죠? 이번에는 똑같은 효과를 적용하여, 글자들이 튕기는 애니메이션을 만들어보겠습니다. 역시 간단하게 작성하였으니 질문은 글로 써주시기바래요. ^_^

1. LayoutRoot
그리드의 배경색을 검은색으로 한 후 텍스트 블록을 생성합니다.


2.Text
에 원하는 텍스트를 입력하고, 폰트와 사이즈를 입력합니다.


3. 텍스트블록을 선택하고 마우스 오른쪽을 눌러 텍스트를 Path로 변환합니다.


4. 변환된 패스를 낱개의 오브젝트로 분리시킵니다.


5. 글자의 공백 부분의 색을 바탕색과 같이 변경하고 레이어의 순서한 단계 앞으로 보냅니다.



6.
한 글자를 이루는 패스가 2개 이상 일 경우 하나의 그룹으로 묶어줍니다.


오브젝트마다 원하는 색을 넣어주어도 됩니다.


7. 모든 오브젝트의 위치를 그리드 밖으로 이동시킵니다.

8. 스토리보드를 생성합니다.

9. 모든 오브젝트를 선택한 후 0, 0.1, 1, 1.5, 1.9, 2.2초가 되는 시점에서 키프레임을 각각 생성합니다.



10. 0
0.1의 키프레임에서 Opacity의 값을 0으로 하여 투명하게 합니다.


11. 모든 오브젝트를 선택한 후 플레이헤더 1에 놓고 아래로 이동시킵니다. 방향키를 이용하거나,  y 좌표값 135 로 입력합니다.


12.
그리고 키프레임을 선택한 후(shift 키 누른채로 선택) 가속도를 줍니다. x2의 값에 1를 입력합니다.




여기까지 완료가 되셨다면 다음장에 이어서 하도록 하겠습니다.

 

Posted by 짱묜