시작: 애니메이션

Applies to Windows and Windows Phone

애니메이션 추가

IOS에서는 애니메이션 효과를 프로그래밍 방식으로 만듭니다. 블록 기반 UIView 클래스의 animateWithDuration 메서드 또는 이전의 비블록 기반 메서드에서 제공한 애니메이션을 사용할 수 있습니다. 또는 CALayer 클래스를 명시적으로 사용하여 계층에 애니메이션 효과를 줄 수 있습니다. Windows 스토어 앱에서는 애니메이션을 프로그래밍 방식으로 수행할 수 있지만 XAML(Extensible Application Markup Language)을 사용하여 선언적으로 수행할 수도 있습니다. Microsoft Visual Studio를 사용하여 XAML 코드를 직접 편집할 수 있습니다. 또한 Visual Studio에서는 디자이너가 애니메이션 작업을 할 때 백그라운드에서 XAML 코드를 자동으로 편집하는 Blend for Microsoft Visual Studio 2013 도구를 제공합니다. 실제로 Blend를 사용하여 전체 Visual Studio 프로젝트를 열고, 디자인, 빌드 및 실행할 수 있습니다. 다음 연습을 통해 해보세요.

시도해 보세요. 새 프로젝트(두 플랫폼 중 하나를 위한 프로젝트 또는 범용)를 만들고 이름을 "SimpleAnimation" 등으로 지정합니다. 이 프로젝트에서는 사각형을 이동하여 사라지게 한 다음 다시 보기로 가져옵니다. XAML로 작성된 애니메이션은 스토리보드 개념을 기반으로 합니다(iOS 스토리보드와 함께 사용되지 않음). 스토리보드에서는 키 프레임을 사용하여 속성 변경에 애니메이션 효과를 적용합니다. Windows 스토어 앱에 암시적 애니메이션은 없지만 보시다시피 애니메이션 속성은 간단합니다.

다음 그림과 같이 프로젝트를 열고 솔루션 탐색기에서 프로젝트 이름을 길게 누른 후 Blend에서 열기를 탭합니다. Visual Studio는 백그라운드에서 계속 실행됩니다.

Blend에서 열기 메뉴 명령

Blend가 시작되면 다음과 같은 화면이 나타납니다.

Blend 개발 환경

이제 다음 그림과 같이 도구 창에서 사각형을 탭하여 선택한 다음 디자인 뷰에서 사각형을 그립니다.

디자인 뷰에 사각형 추가

사각형을 녹색으로 만들려면 속성 창의 브러시 영역에서 단색 브러시 단추, 색 스포이트 아이콘을 차례로 탭한 다음 녹색 색상 밴드 내의 아무 곳이나 탭합니다.

사각형에 애니메이션 효과를 적용하려면 개체 및 타임라인 창에서 다음 그림과 같이 + 기호(새로 만들기) 단추를 탭한 다음 확인을 탭합니다.

스토리보드 추가

스토리보드가 개체 및 타임라인 창에 나타납니다. 디자인 뷰가 변경되어 Storyboard1 타임라인 기록이 켜져 있음이라고 표시됩니다. 사각형의 현재 상태를 캡처하려면 다음 그림과 같이 개체 및 타임라인 창에서 노란색 화살표 바로 위에 있는 키 프레임 기록 단추를 탭합니다.

키 프레임 기록

이제 사각형을 이동하여 사라지게 합니다. 이렇게 하려면 노란색 화살표를 2초 위치로 끌어 놓은 다음 사각형을 오른쪽으로 약간 끕니다. 이제 다음 그림과 같이 속성 창의 모양 영역에서 불투명도 속성을 0으로 변경합니다. 애니메이션을 미리 보려면 다음 그림에 원으로 표시된 재생 단추를 탭합니다.

속성 창 및 재생 단추

이제 사각형을 보기로 다시 가져옵니다. 개체 및 타임라인 창에서 Storyboard1을 탭합니다. 이제 다음 그림과 같이 속성 창의 일반 영역에서 AutoReverse를 탭합니다.

스토리보드 선택

마지막으로 재생 단추를 탭하여 어떻게 되는지 확인합니다.

프로젝트 메뉴, 프로젝트 실행을 차례로 탭하거나 F5 키를 눌러 프로젝트를 실행할 수 있습니다. 이렇게 하면 애니메이션 효과가 적용되지 않은 녹색 사각형이 표시됩니다. 애니메이션을 시작하려면 프로젝트에 코드 줄을 추가해야 합니다. 다음과 같이 하세요.

Blend에서 파일 메뉴, 저장을 차례로 탭한 다음 Visual Studio로 돌아갑니다. Visual Studio에 수정된 파일을 다시 로드할지 여부를 묻는 대화 상자가 표시되면 를 탭합니다. MainPage.xaml.cs 파일을 열고 다음 코드를 추가합니다.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

프로젝트를 다시 실행하고 사각형에 애니메이션 효과가 적용되는지 확인합니다.

MainPage.xaml 파일을 열면 XAML 보기에 디자이너에서 작업할 때 Blend에서 추가된 XAML 코드가 표시됩니다. 특히, <Storyboard><Rectangle> 요소의 코드를 살펴보세요. 다음 코드에서는 예를 보여 줍니다. 타원은 간결하게 나타내기 위해 생략한 관련 없는 코드를 나타내며, 코드를 읽기 쉽도록 줄 바꿈을 추가했습니다.


...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

애니메이션에 대한 자세한 내용은 UI 애니메이션을 참조하세요.

참고  JavaScript 및 HTML을 사용하는 Windows 스토어 앱용 애니메이션에 대한 자세한 내용은 UI 애니메이션(HTML)을 참조하세요.

다음 단계

시작: 다음에 할 일

 

 

표시:
© 2014 Microsoft