Dawn

2) 사진이 튀어나오는 에니메이션 만들기

앞에서 만든 사진뷰어를 오픈할때 시작 스토리보드를 만들어 보겠습니다.
사진보기 화면을 터치하면 사진이 사사삭 들어오는 간단한 에니메이션입니다.

01. 스케터뷰 위에 'Grid_Click'그리드를 하나 그리고 오른쪽 Properties패널에서 Brushes속성중 Background에 아무컬러나 넣고 알파값을 0%로 설정합니다.  그 그리드 안에 사진보기텍스트와  손모양 아이콘을 넣었습니다.

02. 사진이 들어간 스케터뷰 아이템을 다 선택한 후 오른쪽 Properties패널에서 Appearance 속성중 Opacity값을 0%로 설정합니다. 왼쪽하단의 Objects and Timeline패널에서 + 버튼을 눌러서 스토리 보드를 하나 생성합니다.

03. 스토리보드를 생성함과 동시에 녹화 상태(

)가 되고 타임라인이 보여집니다. 스케터뷰 아이템 3개를 동시에 선택하고 0초에서 키프레임을 생성합니다. (달걀처럼 생긴 Record Keyframe버튼을 클릭하면 키프레임이 생성됩니다.요거↓)

그 다음 노란색 키라인을 1초로 옮겨서 키프레임을 또 생성합니다. 1초일때는 앞서 Appearance 속성중 Opacity값을 0%로 설정했던것을 100%로 수정합니다. 0초에서1초가 될때 안보였던 사진들이 서서히 보이겠죠?

04. 그 다음 다시 0초로 돌아가서 스케터뷰 아이템들 각각을 오른쪽 [Properties]패널에서 Miscellaneous속성에서 Center의 값을 바꿔서 중앙에 모여있던 사진들을 뷰 밖으로 이동했습니다. 

05. 그럼 0초에서 1초의 에니메이션은 요렇게 되겠죠? ^^

06. 사진뷰어에서 'Grid_Click'그리드의 사진보기 손 아이콘은 필요없으니까 안보이게 해둡니다.
0.3초 정도에 키프레임을 생성하고 오른쪽 Properties패널에서 Appearance 속성중 Opacity값을 0%로 설정합니다.
그 다음 바로옆에 키프레임을 하나 더 생성하고 Visibility의 속성을 Visible에서 Collapsed로 바꿨습니다. 
저는 재생해보니 사진 나오는게 너무 느려서 스케터뷰아이템 키프레임을 1초에서 앞으로 당겨서 0.4초 정도로 바꿨습니다.^^;

07. x 모양의 Close Storyboard 버튼을 클릭하여 녹화상태를 빠져나옵니다.

08. 왼쪽 상단의 Triggers패널에서 스토리보드를 실행하기 위해 다음과 같은 이벤트를 설정해줍니다. 1) 'Grid_Click' (사진보기)를 2)PreviewContactDown(화면을 터치)하면 3)sb_PhotoOn이라는 스토리 보드를 Begin 합니다.
<s:SurfaceWindow.Triggers>

<EventTrigger RoutedEvent="s:Contacts.PreviewContactDown" SourceName="Grid_Click">

<BeginStoryboard Storyboard="{StaticResource sb_PhotoOn}"/>

</EventTrigger>

09. 화면을 터치하면 에니메이션이 실행되는 이벤트를 설정했습니다. [F5]를 눌러 실행하면 에러가 납니다.

10. 블렌드로 다시 돌아와서 아트보드에서 xaml화면을 엽니다.
 

11. Xaml을 열어서 'sb_PhotoOn' 스토리보드에서 스케터뷰 아이템들의 위치가 Center값을 바꾸어 이동되는 소스코드부분에서 Storyboard.TargetProperty를 ScatterCanvas.Center에서 ScatterViewItem.Center로 수정해주셔야 합니다. 원래는 자동적으로 고쳐져야 되는 부분인데 말이죠.ㅜㅜ

12. 다시 실행해보면 실행이 잘 됩니다. 실행이 잘 되는데.. 사진 늘리거나 회전은 되는데 이동이 안됩니다. 'sb_PhotoOn' 스토리보드에서 스케터뷰 아이템의 위치를 이동해준 Center값이 계속 아이템을 잡고 있어서 라고 합니다.
방금 수정해준 부분에 다시 FillBehavior="Stop"이라고 추가해줍니다.
... Storyboard.TargetProperty="(s:ScatterViewItem.Center)" FillBehavior="Stop">

ScatterViewItem.Center속성값 바꾼 스토리보드에 다 적용 합니다.

13. [F5]를 눌러 실행하면? 실행이 잘 됩니다. 사진도 잘 움직여요.
       1) ScatterCanvas.Center에서 ScatterViewItem.Center로
       2) 스토리보드가 안풀릴때  FillBehavior="Stop"  
두가지 수정해주었습니다.

Surface(서페이스) 디자인 작업 시작하기
Surface Application(WPF)

시작전에 서페이스SDK 설치합니다. (비주얼 스튜디오와 블렌드도 =ㅁ=)

01. Visual Studio에서 새프로젝트를 생성합니다.


02. 프로젝트 형식에서 Surface - v1.0 에서 Surface Application(WPF) 를 선택합니다.
이름(N):에 'SurfaceApplication_test'라고 입력하고 확인을 클릭합니다.  


03. 테스트 프로젝트가 생성되면 솔루션 탐색기에서 프로젝트안에 SurfaceWindow1.xaml 파일을 선택하고 마우스 오른쪽 클릭하여 연결프로그램을 선택합니다.


04. Blend 3 툴을 선택하고 확인을 클릭합니다. ( 연결프로그램 목록에 블렌드가 안보이면 오른쪽에 추가(A)
.. 버튼을 클릭하여 블렌드를 추가시켜줍니다.)


05. 블렌드가 뜨지만 프로젝트는 열리지 않고 경고 메세지가 뜨는데요 블렌드 프로젝트가 아니란 말이겠죠 =ㅂ=
 

06. 그럼 그냥 블렌드에서 방금 생성한 프로젝트를 열겠습니다. [File]-[Open Project] 메뉴를 선택합니다.


07. 해당 폴더를 찾아서 솔루션파일을 선택합니다.


08. 프로젝트가 열리고 왼쪽 상단 탭메뉴중 Assets을 선택합니다. [Controls]- [All] 카데고리에서 스크롤을 내리면 서페이스 컨트롤들이 보입니다. SurfaceButton, SurfaceCheckBox.. 등등


09. 잠시 블렌드를 접어두고 서페이스 시뮬레이터를 실행시킵니다.


10. 시뮬레이터를 실행한 화면입니다. 실제 서페이스 화면과 같습니다. 마우스 포인터가 핑거포인터로 나옵니다.
마우스 포인터 대신 서페이스를 손으로 터치했을때와 같은 인터렉션으로 보여줍니다.
핑거포인터는 여러개 찍을수 있어요.


11. 다시 블렌드를 열어서 [Controls]- [All] 카데고리에 있는 서페이스 컨트롤들을 드래그엔 드랍 하여 아트보드에  올려놓아 봅니다.  다음 [F5]를 눌러 실행시킵니다.

12. 시뮬레이터에 방금 실행한 프로젝트가 보여집니다. (시뮬레이터를 켜지 않으면 그냥 윈도우 창으로 실행이됩니다.) 손으로 터치한다고 생각하고 =_= 컨트롤을 눌러봅니다.
서페이스에서는 터치하고, 떼고, 터치한상태로 움직이고 세가지 동작을 할 수 있습니다.
 
13. 다음은 서페이스 컨트롤들 스타일을 만드는 강좌를 올리도록 하겠습니다.