2008/07/21 06:00
[세티의 실버라이트] 13. 애니메이션 Silverlight2008/07/21 06:00
원글출처:http://silverlight.net/quickstarts/blend_quickstart/part3_animations.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다.
오늘은 Blend2.5를 이용해서 실버라이트로 버튼을 360도 회전 시키면서 크기를 작게 만드는 애니메이션 효과를 만들어 보겠습니다.
이러한 애니메이션 효과를 만들기 위해선 Blend에 있는 타임라인(timelines)을 사용해야 합니다. 타임라인은 두 개 또는 그 이상의 키프레임을 열거한 것을 말하고, 키프레임이란 객체의 스냅샷을 말합니다. 그럼 어떤 순간의 스냅샷을 까요? 우리는 객체의 속성에 어떤 값을 할당함으로써 그 객체의 성격을 결정할 수 있습니다.
타임라인이란
대충 무슨 소린지 이해는 하시겠죠? 보다 확실히 이해하기 위해 간단한 예제를 통해서 위에 언급한 내용에 접근해 보겠습니다. 그것에 대한 적절한 예제 애니메이션으로는 버튼을 360도 회전시키면서 작아지고 배경색이 파란색인 버튼을 자주색으로 변경되는 애니메이션을 만들어 보겠습니다.
먼저 Blend 2.5를 이용해서 버튼 객체를 생성합니다.(이전 강좌에서 작성한 예제를 이용하셔도 됩니다.)
다음으로 타임라인 판넬을 열기 위해서 Object and Timeline Inspector를 클릭하는데 아래의 그림을 참조합니다.
적절한 타임라인 이름을 입력하고 OK를 클릭하면 아래의 그림처럼 화면이 변경된 것을 확인하게 될 겁니다. 빨간 글씨로 Timeline recording is on 이라는 부분을 볼 수 있을텐데요, 말 그대로 타임라인에 키프레임을 넣으면 되고, 알아서 그걸 잘 녹화뜨고 있다.~ 라는 의미로 받아들이면 될 겁니다.
자아~ 그럼 이제 타임라인에 키프레임을 배치해서 애니메이션을 만들어 보겠습니다.
먼저 키프레임에 넣을 객체를 만듭니다. 저는 모서리가 부드러운 파란색 그레데이션 처리가 된 버튼을 만들었습니다.
그리고 두 개의 키프레임을 준비할 것입니다. 하나는 원형 그래도 있는 객체의 스냅샷인 키프레임을 준비할 것이고요, 다른 하나는 360도 회전된 후 이미 작아져있는 그리고 배경도 자주색인 객체의 스냅샷인 키프레임을 준비할 것입니다.
키프레임을 넣기 위해선 객체의 스냅샷을 찍어야 하는데 어떻게 찍어야 할까요? 매우 간단합니다. 아래의 그림에 표시된 부분(recording keyframe)을 단지 클릭만 하면 됩니다.
가볍게 눌러보아요~ 그럼 노란색 라인에 하얀 점이 표시가 되죠? 이제 처음 시작되는 키프레임 설정이 끝난 겁니다. 그 다음으로는 두번째 키프레임을 만들어 보겠습니다.
키프레임 아래를 보면 타임라인을 확대하는 버튼이 있습니다. 타임라인은 1000%까지 확대가 가능하다고 합니다. 확대하기 위해서는 아래 이미지에 표시된 영역을 마우스로 클릭하고 적절한 숫자를 입력하면 됩니다.
이제 마우스로 노란선을 드래그 해서 0.25초 바로 앞 라인에 위치 시킵니다. 요렇게 말이죠.
이제 버튼 객체가 360도 회전할 수 있도록 애니메이션을 줍니다. 360도 회전 시키기 위해선 Transform 판넬에서 Rotate 탭을 클릭하면 됩니다.
그 다음 마지막으로 버튼의 모양을 줄이기 위해서 Scale을 조절합니다. x, y 모두 0.5 씩 입력하도록 합니다.
요렇게 말이죠.^^
그러면 모양이 요렇게 되겠죠???
그리고 타임라인에는 우리가 특별한 스냅샷을 찍는 행위를 하지 않았음에도 자동으로 키프레임이 들어가 있는 것을 볼 수 있을 겁니다. 어떻게 들어갔냐구요?? 위에 빨간 글씨로 기록중!! 이라고 써있잖아요~ ^^
자아~ 이제 만든 것을 한번 돌려볼까요??
매우 간단한 합니다. 아래 그림에 표시된 ▶를 가볍게 눌러주면 됩니다.
멋지게 회전하나요? ^^
이제 만들어진 결과물을 웹 브라우저에 출력해서 확인을 해봐야겠습니다.
타임라인이 만들어내는 애니메이션을 마우스 클릭할 때 시작될 수 있도록 CS 파일에 코딩을 해보겠습니다.
그러기 위해선 먼저 XAML코드를 건드려야 하는데요~ Grid 엘리먼트에 MouseLeftButtonDown="ButtonMouseClick" 속성과 속성값을 코딩합니다. 요렇게 말이죠.
그 다음 CS 파일에 메서드를 추가해 줍니다.
이제 모든 준비가 끝났습니다. F5 키를 눌러서 빌드하고 렌더링 된 결과를 확인해 보십시오.
이상으로 애니메이션에 대한 설명을 마치도록 하겠습니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다.
오늘은 Blend2.5를 이용해서 실버라이트로 버튼을 360도 회전 시키면서 크기를 작게 만드는 애니메이션 효과를 만들어 보겠습니다.
이러한 애니메이션 효과를 만들기 위해선 Blend에 있는 타임라인(timelines)을 사용해야 합니다. 타임라인은 두 개 또는 그 이상의 키프레임을 열거한 것을 말하고, 키프레임이란 객체의 스냅샷을 말합니다. 그럼 어떤 순간의 스냅샷을 까요? 우리는 객체의 속성에 어떤 값을 할당함으로써 그 객체의 성격을 결정할 수 있습니다.
타임라인이란
가령 예를 들어서 색상을 변경한다던가 회전 또는 크기 조절 나타나기도 하고 사라지기도 하는 부분들을 말하는 겁니다. 나타났다가 사라지는 객체를 만들기 위해서는 두 개의 키프레임(객체의 스냅샷)이 필요하겠죠.
하나의 키프레임에서는 객체의 모습이 보일 것이고 다른 하나의 키프레임에서는 객체가 사라지게 될 것입니다. 이것을 시간을 두고 배치를 하게되는데 그 때 우리는 타임라인에 키프레임을 배치한다라고 표현할 수 있는 겁니다. 그럼 타임라인에 배치된 키프레임의 시간 간격에 따라 그 객체의 성격이 자동으로 변경되겠죠.
대충 무슨 소린지 이해는 하시겠죠? 보다 확실히 이해하기 위해 간단한 예제를 통해서 위에 언급한 내용에 접근해 보겠습니다. 그것에 대한 적절한 예제 애니메이션으로는 버튼을 360도 회전시키면서 작아지고 배경색이 파란색인 버튼을 자주색으로 변경되는 애니메이션을 만들어 보겠습니다.
먼저 Blend 2.5를 이용해서 버튼 객체를 생성합니다.(이전 강좌에서 작성한 예제를 이용하셔도 됩니다.)
다음으로 타임라인 판넬을 열기 위해서 Object and Timeline Inspector를 클릭하는데 아래의 그림을 참조합니다.
적절한 타임라인 이름을 입력하고 OK를 클릭하면 아래의 그림처럼 화면이 변경된 것을 확인하게 될 겁니다. 빨간 글씨로 Timeline recording is on 이라는 부분을 볼 수 있을텐데요, 말 그대로 타임라인에 키프레임을 넣으면 되고, 알아서 그걸 잘 녹화뜨고 있다.~ 라는 의미로 받아들이면 될 겁니다.
자아~ 그럼 이제 타임라인에 키프레임을 배치해서 애니메이션을 만들어 보겠습니다.
먼저 키프레임에 넣을 객체를 만듭니다. 저는 모서리가 부드러운 파란색 그레데이션 처리가 된 버튼을 만들었습니다.
그리고 두 개의 키프레임을 준비할 것입니다. 하나는 원형 그래도 있는 객체의 스냅샷인 키프레임을 준비할 것이고요, 다른 하나는 360도 회전된 후 이미 작아져있는 그리고 배경도 자주색인 객체의 스냅샷인 키프레임을 준비할 것입니다.
키프레임을 넣기 위해선 객체의 스냅샷을 찍어야 하는데 어떻게 찍어야 할까요? 매우 간단합니다. 아래의 그림에 표시된 부분(recording keyframe)을 단지 클릭만 하면 됩니다.
가볍게 눌러보아요~ 그럼 노란색 라인에 하얀 점이 표시가 되죠? 이제 처음 시작되는 키프레임 설정이 끝난 겁니다. 그 다음으로는 두번째 키프레임을 만들어 보겠습니다.
키프레임 아래를 보면 타임라인을 확대하는 버튼이 있습니다. 타임라인은 1000%까지 확대가 가능하다고 합니다. 확대하기 위해서는 아래 이미지에 표시된 영역을 마우스로 클릭하고 적절한 숫자를 입력하면 됩니다.
이제 마우스로 노란선을 드래그 해서 0.25초 바로 앞 라인에 위치 시킵니다. 요렇게 말이죠.
이제 버튼 객체가 360도 회전할 수 있도록 애니메이션을 줍니다. 360도 회전 시키기 위해선 Transform 판넬에서 Rotate 탭을 클릭하면 됩니다.
그 다음 마지막으로 버튼의 모양을 줄이기 위해서 Scale을 조절합니다. x, y 모두 0.5 씩 입력하도록 합니다.
요렇게 말이죠.^^
그러면 모양이 요렇게 되겠죠???
그리고 타임라인에는 우리가 특별한 스냅샷을 찍는 행위를 하지 않았음에도 자동으로 키프레임이 들어가 있는 것을 볼 수 있을 겁니다. 어떻게 들어갔냐구요?? 위에 빨간 글씨로 기록중!! 이라고 써있잖아요~ ^^
자아~ 이제 만든 것을 한번 돌려볼까요??
매우 간단한 합니다. 아래 그림에 표시된 ▶를 가볍게 눌러주면 됩니다.
멋지게 회전하나요? ^^
이제 만들어진 결과물을 웹 브라우저에 출력해서 확인을 해봐야겠습니다.
타임라인이 만들어내는 애니메이션을 마우스 클릭할 때 시작될 수 있도록 CS 파일에 코딩을 해보겠습니다.
그러기 위해선 먼저 XAML코드를 건드려야 하는데요~ Grid 엘리먼트에 MouseLeftButtonDown="ButtonMouseClick" 속성과 속성값을 코딩합니다. 요렇게 말이죠.
그 다음 CS 파일에 메서드를 추가해 줍니다.
이제 모든 준비가 끝났습니다. F5 키를 눌러서 빌드하고 렌더링 된 결과를 확인해 보십시오.
이상으로 애니메이션에 대한 설명을 마치도록 하겠습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 14. 전문 컨트롤 만들기 (0) | 2008/07/29 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 클래스 라이브러리 만들기 (0) | 2008/07/23 |
| [세티의 실버라이트] 13. 애니메이션 (2) | 2008/07/21 |
| [엘리의 실버라이트 2.0] Silverlight 응용 프로그램 만들기 (0) | 2008/07/18 |
| [세티의 실버라이트] 12. 마우스 이벤트와 프로시저 코드 (4) | 2008/07/16 |
| [엘리의 실버라이트 2.0] 첫 인사 (0) | 2008/07/11 |
