Expression Blend/WPF2010. 8. 12. 18:01
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>
<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"  
두가지 수정해주었습니다.

Posted by 도온
Expression Blend/WPF2010. 8. 11. 16:04

서피스 화면 위의 사진이나 오브젝트들을 터치로 늘렸다 줄였다 이리저리 움직이는 기능을 컨트롤로 간단하게 구현할 수 있습니다. 


사진출처 :
http://dvice.com/archives/2008/04/microsoft_surfa.php?p=14&cat=undefined#more

블렌드에서 ScatterView 컨트롤을 펼쳐놓고 scatterViewItem을 추가해서 scatterViewItem에 사진만 넣어 주시면 됩니다.

그렇게 해서 시뮬레이터로 실행하면 요렇게 사진이 랜덤하게 화면에 뿌려지고 늘렸다 줄였다 이리저리 움직이고 돌리고 할 수 있습니다.
그런데 스케터뷰에 랜덤하게 나오는 오브젝트들의 위치를 미리 정해놓거나 늘어나는 사이즈를 최대 최소를 정해놓거나 이동을 못하게 한다던가 오브젝트들에 간단한 에니메이션을 주고 싶을때는 ? 
스케터뷰아이템의 속성을 이용해서 간단히 스토리보드를 만들 수 있습니다. 
스케터뷰아이템을 스토리보드로 에니메이션을  만들때 xaml에서 몇가지 수정이 필요했던 것이 있어서 정리해둡니다. 
 

1) 스케터뷰로 간단히 터치 사진뷰 만들기

01. 비주얼스튜디오에서 서피스어플리케이션을 생성하고 블렌드에서 오픈했습니다. (
http://atdawn.tistory.com/36 참조)


02. 최상위 Grid선택하고 오른쪽 [Properties]패널에서 Layout속성을 w1024* h768 로 사이즈를 조정합니다. (서피스 해상도)


03. 왼쪽 [Assets]패널 Controls파트에서 SCATTER로 검색하면 관련컨트롤이 나옵니다.


04. 최상위 그리드 안에 스케터뷰 컨트롤을 그리드 꽉차게 넣은다음 스케터뷰 컨트롤 안에 스케터뷰아이템을 3개 정도 추가합니다.


05. 시뮬레이터를 켠 다음 [시작]-[Microsoft Surface SDK 1.0 SP1]-[Tools]-[Surface Simulator]


06. 방금 만든 부분을 실행 시켜봅니다. [F5]  실행화면에 디폴트 스타일의 스케터뷰 아이템이 랜덤으로 뿌려집니다. 사이즈 조절도 되고 회전도 되고 편하네요! ^^


07. 왼쪽 Projects패널에서 App파일을 선택한 후 마우스 오른쪽을 클릭하여 [Add Existing Item...]메뉴로 사진을 불러옵니다.


08. 불러온 사진들을 스케터뷰아이템안에 쏙쏙 넣어줍니다. (Projects패널에서 떠블클릭을 하면 사진이 아트보드에 뿌려집니다.) 사진을 넣을때 Margin속성에 값이 들어가는지 확인한번 해주세요. Margin(0,0,0,0)
오른쪽 [Properties]패널에서 Layout속성에서 스케터뷰 아이템의 Width값과 Height값을 사진크기에 맞게 설정해줍니다.


09. 그런다음 다시 실행해주면 화면에 빈 스케터뷰 아이템 대신 사진이 떠다니고 있습니다. 초간단 사진 뷰어 완성! 


10. 스케터뷰 아이템의 속성을 좀더 알아보겠습니다. 오른쪽 [Properties]패널에서 Miscellaneous속성을 열어보면 여러가지 옵션들이 보이는데요, ①CanMove ②CanRotate ③CanScale ④Center ⑤Orientation을 주로 사용합니다. 네임만 봐도 어떤 속성인지 보이시죠^^


11.④Center에서는 오브젝트의 위치를 지정해줄 수 있습니다. (0,0)일 경우 오브젝트의 센터가 레이아웃의 0,0 값에 위치합니다.⑤Orientation에도 값을 넣어 각도를 조절 할 수 있습니다. 


12. 사진의 위치와 각도가 지정한 값으로 화면이 실행됩니다.


이어서 http://atdawn.tistory.com/70

Posted by 도온