언어: HTML | XAML

빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기(XAML)

Applies to Windows and Windows Phone

Windows 런타임의 애니메이션은 움직임과 대화형 작업을 추가하여 앱을 향상시킬 수 있습니다. Windows 런타임 애니메이션 라이브러리의 애니메이션을 사용하면 해당 모양과 느낌을 앱에 통합할 수 있습니다.

참고  이 항목에서 설명한 여러 개념을 보여 주는 샘플을 다운로드하려면 XAML 개성 애니메이션 샘플을 참조하세요.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

전환 애니메이션

앱에서 애니메이션을 사용하여 사용자 인터페이스를 향상시키거나 사용자에게 불편을 주지 않으면서 더 멋진 모습으로 만들 수 있습니다. 그 방법 중 하나는 UI에 애니메이션 전환을 적용하는 것입니다. 그러면 뭔가가 화면에 들어오거나 나갈 때 또는 다른 변화가 있을 때 애니메이션을 이용하여 그 변화에 사용자의 관심을 끌 수 있습니다. 예를 들어 단추가 단순히 표시되거나 사라지기보다는 빠른 속도로 페이드 인하거나 페이드 아웃할 수 있습니다. 일관된 권장 또는 일반 애니메이션 전환을 만드는 데 사용할 수 있도록 다양한 API가 마련되었습니다. 다음 예제는 단추에 애니메이션을 적용하여 빠른 속도로 미끄러지듯 나타나게 하는 방법을 보여 줍니다.


<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button> 

이 코드에서 단추의 전환 컬렉션에 EntranceThemeTransition 개체를 추가합니다. 이제 단추가 처음으로 렌더링될 때 단순히 나타나기보다는 빠른 속도로 미끄러지듯 화면에 들어옵니다. 애니메이션 개체의 몇 가지 속성을 설정하여 미끄러지는 거리와 방향을 조정할 수 있습니다. 그러나 사실 이는 특정 시나리오를 위한, 즉 눈길을 끄는 입장을 연출하는 단순한 API입니다.

또한 앱의 스타일 리소스에서 전환 애니메이션 테마를 정의하여 동일하게 효과를 적용할 수 있습니다. 이 예제는 Style을 사용하여 적용한다는 점을 제외하고 이전의 예제와 동일합니다.


<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

이전의 예제는 개별 컨트롤에 테마 전환을 적용합니다. 그러나 테마 전환은 개체의 컨테이너에 적용할 경우 훨씬 더 흥미로워집니다. 이 작업을 하면 컨테이너의 모든 하위 개체가 전환에 참여합니다. 다음 예제에서는 직사각형의 GridEntranceThemeTransition을 적용합니다.


<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Grid의 하위 직사각형이 차례로 화면으로 전환되는데, 직사각형 각각에 이 애니메이션을 적용하여 한꺼번에 전환되는 것보다 큰 시각적인 즐거움을 선사합니다.

다음은 이 애니메이션을 보여 주는 동영상입니다.

|

컨테이너의 하위 개체 중 하나 이상의 위치가 바뀔 경우에도 이 하위 개체들은 재배치될 수 있습니다. 다음 예제에서는 직사각형의 그리드에 RepositionThemeTransition을 적용합니다. 직사각형 중 하나를 제거하면 나머지 직사각형들은 새로운 위치로 재배치됩니다.


<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>


private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    { 	 
        rectangleItems.Items.RemoveAt(0);
    }		  		  		  
}

이 동영상에서는 제거할 직사각형에 대해 실행되는 애니메이션을 보여 줍니다.

|

하나의 개체 또는 개체 컨테이너에 여러 전환 애니메이션을 적용할 수 있습니다. 예를 들어 직사각형의 목록이 애니메이션 형태로 화면에 나타나게 하고 이들의 위치가 변경될 때도 애니메이션하려는 경우 다음과 같이 RepositionThemeTransitionEntranceThemeTransition을 적용할 수 있습니다.



...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...	 	 

UI 요소를 추가하거나, 제거하거나, UI 요소의 순서를 다시 매기는 등의 작업을 수행할 때 UI 요소에 대한 애니메이션을 만들기 위한 몇 가지 전환 효과가 있습니다. 이러한 API의 이름에는 모두 "ThemeTransition"이 포함되어 있습니다.

API설명
AddDeleteThemeTransition 컨트롤에서 하위 개체나 콘텐츠를 추가하거나 삭제할 때 애니메이션 전환 동작을 제공합니다. 일반적으로 컨트롤은 항목 컨테이너입니다.
ContentThemeTransition 컨트롤의 콘텐츠가 바뀔 때 애니메이션 전환 동작을 제공합니다. AddDeleteThemeTransition에 추가하여 이 API를 적용할 수 있습니다.
EdgeUIThemeTransition 작은 가장자리 UI 전환에 애니메이션 전환 동작을 제공합니다.
EntranceThemeTransition 컨트롤이 처음으로 나타날 때 애니메이션 전환 동작을 제공합니다.
PaneThemeTransition 패널(큰 가장자리 UI) UI 전환에 애니메이션 전환 동작을 제공합니다.
PopupThemeTransition 컨트롤의 팝 인 구성 요소(예: 개체의 도구 설명 같은 UI)가 나타날 때 적용되는 애니메이션 전환 동작을 제공합니다.
ReorderThemeTransition 목록 보기 컨트롤 항목의 순서가 바뀔 때 애니메이션 전환 동작을 제공합니다. 일반적으로 이는 끌어서 놓기 동작의 결과로 일어납니다. 여러 컨트롤과 테마가 애니메이션에 다양한 특성을 부여할 수 있습니다.
RepositionThemeTransition 컨트롤의 위치가 바뀔 때 애니메이션 전환 동작을 제공합니다.

 

테마 애니메이션

전환 애니메이션은 간단하게 적용할 수 있습니다. 그러나 애니메이션 효과의 타이밍 및 순서를 추가로 제어하는 것이 필요한 경우도 있습니다. 애니메이션의 동작에 대해 일관성 있는 테마를 사용하면서 테마 애니메이션을 사용하여 추가적인 제어가 가능합니다. 또한 테마 애니메이션에는 사용자 지정 애니메이션보다 태그가 덜 필요합니다. 여기서는 FadeOutThemeAnimation을 사용하여 직사각형이 화면에서 페이드 아웃하게 합니다.


<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>


// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

전환 애니메이션과 달리, 테마 애니메이션에는 자동으로 실행되는 기본 제공 트리거(전환)가 없습니다. XAML에서 정의할 때 테마 애니메이션을 포함하려면 Storyboard를 사용해야 합니다. 애니메이션의 기본 동작을 변경할 수도 있습니다. 예를 들어 FadeOutThemeAnimation에서 Duration 시간 값을 늘려 페이드 아웃의 속도를 늦출 수 있습니다.

참고  기본 애니메이션 기술을 보여 주기 위해 앱 코드를 사용해 Storyboard의 메서드를 호출하여 애니메이션을 시작합니다. Begin, Stop, Pause, Resume Storyboard 메서드를 사용하여 Storyboard 애니메이션이 실행되는 방법을 제어할 수 있습니다. 그러나 일반적으로 앱에 라이브러리 애니메이션을 포함하는 방법은 아닙니다. 대신 컨트롤 또는 요소에 적용된 XAML 스타일 및 템플릿에 라이브러리 애니메이션을 통합합니다. 템플릿 및 시각적 상태에 대해 알아보는 과정은 약간 더 복잡합니다. 그러나 시각적 상태에 대한 스토리보드 애니메이션 항목의 일부로 시각적 상태에서 라이브러리 애니메이션을 사용하는 방법을 설명합니다.

UI 요소에 다른 여러 테마 애니메이션을 적용하여 애니메이션 효과를 낼 수 있습니다. 이러한 API의 이름에는 모두 "ThemeTransition"이 포함되어 있습니다.

API설명
DragItemThemeAnimation 끌고 있는 항목 요소에 적용되는 미리 구성된 애니메이션을 나타냅니다.
DragOverThemeAnimation 끌고 있는 요소 아래의 요소에 적용되는 미리 구성된 애니메이션을 나타냅니다.
DropTargetItemThemeAnimation 잠재적 드롭 대상 요소에 적용하는 미리 구성된 애니메이션
FadeInThemeAnimation 컨트롤이 처음으로 나타날 때 적용하는 미리 구성된 불투명 애니메이션
FadeOutThemeAnimation 컨트롤이 UI에서 제거되거나 숨겨질 때 적용하는 미리 구성된 불투명 애니메이션
PointerDownThemeAnimation 항목이나 요소를 탭 또는 클릭하는 사용자 동작을 위한 미리 구성된 애니메이션
PointerUpThemeAnimation 사용자가 항목이나 요소를 탭하고 동작이 해제된 후 실행되는 사용자 동작을 위한 미리 구성된 애니메이션
PopInThemeAnimation 컨트롤이 나타날 때 그 팝 인 구성 요소에 적용하는 미리 구성된 애니메이션. 이 애니메이션은 불투명과 변환을 결합합니다.
PopOutThemeAnimation 컨트롤이 닫히거나 제거될 때 그 팝 인 구성 요소에 적용하는 미리 구성된 애니메이션. 이 애니메이션은 불투명과 변환을 결합합니다.
RepositionThemeAnimation 다시 배치되는 개체를 위한 미리 구성된 애니메이션
SplitCloseThemeAnimation 분할 애니메이션을 사용하여 대상 UI를 숨기는 미리 구성된 애니메이션
SplitOpenThemeAnimation 분할 애니메이션을 사용하여 대상 UI를 표시하는 미리 구성된 애니메이션
SwipeBackThemeAnimation 살짝 밀기 조작 이후에 어떤 요소가 레이아웃 슬롯에 다시 들어올 때 컨트롤에 적용하는 미리 구성된 애니메이션
SwipeHintThemeAnimation 현재 살짝 밀기 제스처가 가능함을 나타내는 미리 구성된 애니메이션

 

컨트롤에 대한 기본 제공 애니메이션

일부 Windows 런타임 컨트롤에는 컨트롤 논리 및 기본 XAML 템플릿의 일부로 기본 제공된 애니메이션이 있습니다. UI의 애니메이션에 이러한 컨트롤을 사용할 수 있도록 이러한 컨트롤에 대해 알아두는 것이 좋습니다.

다음은 기본 제공된 애니메이션이 있는 일부 컨트롤 목록입니다.

참고  전체 목록은 아닙니다. 자세한 내용은 같은 영역의 "... 애니메이션"이나 특정 컨트롤에 대한 "스타일 및 템플릿" 항목을 참조하세요.

직접 애니메이션 만들기

테마 애니메이션으로는 필요 사항을 해결하기에 부족할 경우 직접 애니메이션을 만들 수 있습니다. 하나 이상의 속성 값에 애니메이션 효과를 주어 개체에 애니메이션 효과를 줍니다. 예를 들어 직사각형의 너비, RotateTransform의 각도 또는 단추의 색상 값에 애니메이션 효과를 줄 수 있습니다. 이런 유형의 사용자 지정 애니메이션을 스토리보드 애니메이션이라고 하고, Windows 런타임에서 미리 구성된 애니메이션 유형으로 이미 제공하는 라이브러리 애니메이션과 구분합니다. 스토리보드 애니메이션의 경우 특정 유형의 값을 변경할 수 있는 애니메이션(예: Double을 애니메이션하는 DoubleAnimation)을 사용하고 해당 애니메이션을 Storyboard 내에 배치하여 제어합니다.

애니메이션 효과를 주려는 속성은 종속성 속성이어야 합니다. 종속성 속성에 대한 자세한 내용은 종속성 속성 개요를 참조하세요. 사용자 지정 스토리보드 애니메이션을 대상으로 하고 조정하는 방법을 비롯한 사용자 지정 스토리보드 애니메이션 만들기에 대한 자세한 내용은 스토리보드 애니메이션을 참조하세요.

사용자 지정 스토리보드 애니메이션을 정의할 XAML에서 가장 큰 앱 UI 정의 영역은 XAML에서 컨트롤에 대한 시각적 상태를 정의하는 경우입니다. 이 작업은 새 컨트롤 클래스를 만들고 있거나 컨트롤 템플릿에 시각적 상태가 있는 기존 컨트롤의 템플릿을 다시 만들고 있기 때문에 수행합니다. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요. 이러한 애니메이션은 대개 시간에 따라 전혀 전환되지 않고, 즉각적으로 발생하고, 상태에 대한 속성 변경 집합을 정의하기 위한 기술적인 면이 훨씬 큽니다. 컨트롤에 대한 시각적 상태가 표시되기 때문에 종종 라이브러리 애니메이션 자체를 포함하지만 UI에 시각적 애니메이션 동작을 적용할 필요는 없습니다. 이런 경우 일반적으로 짧은 기간이지만 테마 애니메이션은 시간에 따라 변경 내용을 적용합니다.

관련 항목

C# 또는 VB를 사용하여 앱을 만들기 위한 로드맵
속성 경로 구문
종속성 속성 개요
스토리보드 애니메이션
시각적 상태에 대한 스토리보드 애니메이션
키 프레임 애니메이션 및 감속/가속 함수 애니메이션
Storyboard
Storyboard.TargetProperty

 

 

표시:
© 2014 Microsoft