일명 짝퉁 Chapters 기능을 구현해보겠습니다. Chapters 기능은 요즘 UCC 플레이어에서 빼놓을 수 없는 핵심기능입니다. 스틸사진(Thumb)을 클릭하면 그 위치로 부터 동영상이 다시 재생됩니다. 보통 스틸사진은 여러장으로 구성되어 있으며 애니메이션등의 효과를 주기도 하며 평소엔 화면에서 사라졌다가 마우스를 올려놓으면 다시 나타나는 일련의 동작을 반복합니다.
이번강좌는 Chapters 기능의 구현의 1번째 강좌로 Expression Blend에서 애니메이션을 구현해 보겠습니다.
위의 xaml 코드를 Page.xaml에 붙여넣기 하시기 바랍니다. 애니메이션 작업을 위해 Expression Blend에서 간단하게 구현을 해보겠습니다.
Chapters xaml코드가 적용된 실행화면입니다.
Page.xaml 페이지를 Expression Blend에서 열기를 합니다.
객체목록에서 애니메이션을 적용할 CanChapter를 선택하고 애니메이션 목룍 상자를 연다음 +버튼을 눌러 애니메이션을 추가하시기 바랍니다.
첫번째 애니에미이션의 이름은 ChaptersShowAni로 하고 Create as a Resource를 체크하시면 됩니다. 이 애니메이션은 마우스가 같을때 Chapters가 화면에 나타나게 됩니다.
StoryBoard를 만들면 애니메이션 효과를 주기위한 타임라인이 생깁니다.
타임라인의 시간을 1초뒤로 옮긴다음 붉은색 테두리 안의 키프레임을 하나 만듭니다.
화면에서 타원형의 키프레임이 생긴것을 확인하실수 있습니다. 그다음에 Opacity값을 99%로 변경합니다. Opacity속성은 객체의 투명도를 나타내는 속성입니다.
1초동안 애니메이션이 유지되도록 있도록 동일한 방법으로 0초에 키프레임을 만들고 Opactiy값을 99%로 유지합니다.
마우스가 Chapters위에 올라갔을때 Chapters가 화면에 나타나게 하는 애니메이션이 완성되었습니다.
아마도 Expression Blend에서 작업을 했지만 분명 강좌처럼 쉽게 되지 않는 분도 있을것으로 앞니다. 먼저 애니메이션에 대한 기본적인 이해와 Storyboard, Timeline, KeyPrime 등과 같은 용어와 기능에 대한 어느정도 이해가 필요하며 여러번에 걸친 연습과 이해가 필요하리라 봅니다.
잘 되지 않으신다면 위의 코드를 Page.xaml 파일에 <Canvas.Resources> </Canvas.Resources> 태그 사이에 붙여넣기 하시면 됩니다.
두번째 애니메이션은 첫번째 애니메이션 만드는 방법과 동일하며 에니메이션이 이름은 "ChaptersHiddenAni"으로 하고 타임라인의 시간을 1초에 두고 키프레임을 만들고 Opactiy값을 0으로 한다음 다시 타임라인 위치를 0초 위초로 옮긴다음에 두번째 키프레임을 만들고 Opactiy값을 99%로 변경하고 Expression Blend에서 저장을 하시면 됩니다. 애니메이션 제작과정을 두번 연속 하게될 경우 강좌를 보시는 분들의 스크롤압박(?) 문제도 있고 해서 일단 글로서 대신할까 합니다.
최종적으로 완성된 xaml 코드를 보시면 2개의 매니메이션이 만들어진것을 확인할 수 있습니다. BeginTime은 애니메이션이 시작되는 시간을 지정하는 것이고 Storyboard.TargetName은 애니메이션을 적용할 대상입니다. 여기서는 CnvChapter입니다. Storyboard.TargetProperty는 대상의 애니메이션을 줄 효과를 지정합니다. 투명도가 될것인지 아니면 회전, 변형, 위치이동등 여러가지 속성을 지정할 수 있습니다. 여기서는 투명도에 대한 효과이니까 UIElement.Opacity 값을 주어습니다.
애니메이션의 효과를 적용하기 위한 비하인드 코드에서 작업을 진행하겠습니다.
Page_Loaded 이벤트에 MouseEnter, MouseLeave 두개의 이벤트를 선언합니다.
MouseEnter 이벤트는 화면에서 Chapters가 나타나야 하므로 Show 애니메이션이 시작하고 Hidden 애니메이션은 정지합니다.
MouseLeave는 화면에서 Chapters가 사라야쟈 하므로 MouseEnter 이벤트와는 반대로 애니메이션이 동작합니다.