Chapter 8. 실버라이트 이펙트 시리즈 1- 예쁜 동그라미 물결 이펙트(1)

이번 예제는
전에 제가 인터넷 돌아다니다가 봤던 것인데... 만들어 놓으면 좋겠다는 생각이 들어서 만들어 본 것입니다.




로딩중으로 쓰면 예쁠것 같아요.
제목은 머라고 쓸지 모르겠어서. 예쁜 동그라미 물결 이펙트라고 지었어요. *^^*

우선 만들기 전에 생각해 봅시다. 어떻게 만들면 될지..
첫번째로.. 우선 바탕은 저렇게 그라데이션을 주면 되고..
두번째로 원이 여러개 있는데 커졌다 작아졌다 하는 애니메이션이 들어있는 유저컨트롤을 만들고
세번째로.. 그 유저컨트롤을 쭉 나열해 주면 되겠네요.. 정말 간단하죠?

생각이 안되시는 분들은 걱정하지 마세요. 따라하다 보면 다 이해가 될거에요..

강좌를 오랜만에  쓰다보니 서론이 굉장히 길어졌습니다.

시작합니다.



1. waveDotMotion 라는 이름으로 실버라이트 프로젝트를 생성합니다.

2. LayoutRoot를 선택하고




3. Brush 패널로 가서 아래 그림과 같이 순서대로 ①백그라운드를 선택하고 ②그라데이션으로 변경한 후
③맨 끝을 콕 찍고요~ ④찍은 부분의 색상을 #FF210030으로 바꿔 줍니다.




4. LayoutRoot위에다가 원을 그리고 그 원에 다음과 같이 속성을 줍니다.
( Fill : #FFFFFFFF  / Stroke : Nobrush  / Width : 40   / Height : 40 )









5. 원을 선택하고 Alt키와 Shift키를 누르면서 아래로 드래그 합니다 (그러면 위치의 흔들림이 없이 복사가 잘 되요~)





6. 그렇게 복사를 해서 다음 그림과 같이 7개의 원을 만들어 줍니다.




7. 다음 그림과 같이 첫번째 원을 선택하고 Ctrl을 누른채 맨 아래 원을 선택합니다.
그리고 Transform 패널의 Scale탭에 가서 X:0.2 / Y:0.2로 바꿔 줍니다. 




8. 그러면 다음 그림과 같이 원의 크기가 원래 크기의 20%로 줄어드는 것을 확인 할 수 있습니다.




9. 이번엔 그림과 같이 위에서 두번째 원을 선택하고 Ctrl을 누른채  아래에서 두번째에 있는 원을 선택합니다.
그리고 Transform 패널의 Scale탭에 가서 X:0.4 / Y:0.4로 바꿔 줍니다. 




10. 그러면 원의 크기가 원래 크기의 40%로 줄어드는 것을 확인 할 수 있습니다.




11.  이번에는 다음 그림과 같이 위에 세번째 원을 선택하고 Ctrl을 누른채,
아래에서 세번째 원을 선택하고 Scale탭에 가서 X:0.6 / Y:0.6으로 바꿔 줍니다. 





12. 이제 7개의 원을 하나로 묶어 주겠습니다. 다음 그림의 순서대로..
①첫번째 원을 선택하고 Shift를 누른채 ②맨 마지막 원을 선택합니다. (Shift를 누르면 중간것들이 다 선택이 되요~)
③선택한 지점에서 마우스를 우클릭 하고 Group Into로 가서 ④StackPanel을 선택합니다.



13.  그러면 다음 그림과 같이 StackPanel로 묶여 지는 것을 확인 할 수 있습니다.




14. StackPanel의 선택을 유지한 채 Opacity를 30으로 줍니다.





15. StackPanel에서 마우스 우클릭 하고  Make Into UserControl을 선택합니다.
UserControl로 만들어서 MainPage.xaml에서 재사용 하기 위해서입니다.

UserControl이 무엇인지 궁금하신 분들은  http://www.whitecoco.net/entry/예제로-배우는-Expression-Blend-Chapter-4-웨이브-효과-유저컨트롤-사용하기  를 참고 하시면 좋아요 ..

16. 다음과 같은 창이 뜨면 그냥 OK를 클릭합니다.




17. UserControl1.xaml의 화면이 오픈되었습니다.




18. StackPanel을 선택하고 Scale을 X:0 / Y:0으로 해 줍니다.




19. Storyboard1이라는 이름으로 스토리보드를 생성합니다.




20. 스토리 보드를 만들었으니 이제 모션을 줘야겠지요. 작은상태를 시작으로 커졌다 작아졌다 하는 것을 만들 것 입니다.
그래서 18번째 순서에서 X:0 / Y:0으로 해놨던 것입니다.

다음 그림과 같이 ①StackPanel을 선택하고 ②타임라인을 0.6로 이동시킨 후 ③Record KeyFrame을 선택합니다.
그리고 Scale을 다시 X:1 / Y:1로 바꿔 줍니다.




21. 다음 그림과 같이 0.6초의 위치에 키프레임이 생성되고 StackPanel이 원래의 크기가 되었음을 확인 할 수 있습니다.




22. 앞에 서는 커지게 해줬으니까. 이제 다시 작아지는 모션을 줘야겠지요?

다음 그림과 같이 ①StackPanel을 선택하고 ②타임라인을 1.3로 이동시킨 후 ③Record KeyFrame을 선택합니다.
그리고 Scale을 다시 X:0 / Y:0로 바꿔 줍니다.

혹시 0 이 안들어가고 자꾸 다른 숫자로 바뀌어도 당황하지 마세요.   저는 어쩔때는 0이 0.0000029로 나올때도 있구요..  어쩔때는 1E-06나 1.7E-05로 나올때도 있습니다.  그런데 xaml코드를 보면 0으로 잘 되어 있습니다. 블렌드를 껐다 키면 0으로 잘 보여집니다.

23. 다음 그림과 같이 1.3초의 위치에 키프레임이 생성되고 StackPanel이 0 의 크기가 되었음을 확인 할 수 있습니다.




24. Play를 눌러서 커졌다 작아지는 것을 확인 할 수 있습니다.



25. 이제 속도감을 주기 위해 Easing을 사용하겠습니다.
첫번째 키프레임을 선택하고 EasingFuction패널에서 Circle Out을 줍니다




26. 첫번째 키프레임을 선택하고 EasingFuction패널에서 Circle In을 줍니다.





27. Play를 눌러서 커질 때 작아질 때의 속도감을 느낄 수 있습니다.
커질때는 Circle Out  그래프 모양 그대로 천천히 커지고
작아질때는 Circle In 그래프 모양 그대로 빨리 작아지는 것을 확인 할 수 있습니다.




28.  애니메이션이 계속 진행되게 하기 위해 다음 그림과 같이 Storyboard1를 선택하고 RepeatBehavior를 Forever로 줍니다.




29.  를 눌러 Storyboard1을 닫고 애니메이션 모드를 빠져나옵니다.




30. 다음 그림과 같이 LayoutRoot를 선택하고 Width:40을 줍니다.




31. 이제 자동으로 스토리 보드가 실행되게 해야 됩니다.
( Behavior를 사용할 수도 있지만...
지금 예제는 제가 여러번 테스트한 결과 지금 진행 할 방법으로 해야 매끄러워요~ )

아래 그림과 같이 순서대로 ①UserControl을 선택합니다. ②Properties패널에서 Events를 선택하고
③ Loaded에서 더블클릭합니다.





32. 그러면 다음 그림과 같이  UserControl1.cs가 열리고  핑크색 상자 부분처럼 UserControl을 로드했을때 들어오는 함수가 생겨요~



33. UserControl1.xaml.cs 저장하고 닫습니다.

너무 길어서 다음장에 이어서 해야 겠습니다.
바로 올릴테니 조금만 기다려 주세요~~~