http://atdawn.tistory.com/69 다음 내용입니다.
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>
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"
두가지 수정해주었습니다.
2) 사진이 튀어나오는 에니메이션 만들기
앞에서 만든 사진뷰어를 오픈할때 시작 스토리보드를 만들어 보겠습니다.
사진보기 화면을 터치하면 사진이 사사삭 들어오는 간단한 에니메이션입니다.
01. 스케터뷰 위에 'Grid_Click'그리드를 하나 그리고 오른쪽 Properties패널에서 Brushes속성중 Background에 아무컬러나 넣고 알파값을 0%로 설정합니다. 그 그리드 안에 사진보기텍스트와 손모양 아이콘을 넣었습니다.
03. 스토리보드를 생성함과 동시에 녹화 상태(
그 다음 노란색 키라인을 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 버튼을 클릭하여 녹화상태를 빠져나옵니다.
<s:SurfaceWindow.Triggers>
<EventTrigger RoutedEvent="s:Contacts.PreviewContactDown" SourceName="Grid_Click">
<BeginStoryboard Storyboard="{StaticResource sb_PhotoOn}"/>
</EventTrigger>
</s:SurfaceWindow.Triggers>
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"
두가지 수정해주었습니다.
