여러 XAML 개체에 스토리보드 애니메이션 적용

Applies to Windows and Windows Phone

다음은 여러 스토리보드 애니메이션을 만들 필요 없이 동일한 스토리보드를 여러 개체에 적용하는 방법입니다.

앱에서 이 XAML 페이지를 찾아서 키패드 이미지 그리드를 표시합니다. 사용자가 이러한 단추 중 하나를 탭할 때 애니메이션 효과를 주어 마치 움직인 것처럼 보이도록 하려고 합니다.

여러 단추가 있는 XAML 파일: 각 단추에 대한 스토리보드 애니메이션을 만들려고 하나요?

단추에 스킨 및 애니메이션 효과 주기 항목에서 살펴본 대로 애니메이션 블록에서 시간 경과에 따라 불투명도 등의 매개 변수를 변화시키는 iOS와 달리 Windows 8에서는 스토리보드 개체를 사용합니다. 화면에 단추 그리드 같은 여러 가지 유사한 XAML 개체가 있는 경우 각 개체에 대한 고유한 스토리보드를 만들어야 하는지 궁금할 수 있습니다. 걱정할 필요가 없습니다. 다음과 같은 방법으로 동일한 애니메이션을 여러 개체에 적용할 수 있습니다.

참고   Windows 8에서 스토리보드는 Xcode에서 응용 프로그램을 배치하는 방법이 아니라 애니메이션입니다.

핵심은 다음 예제와 같이 스토리보드의 TargetName 속성을 프로그래밍 방식으로 변경하는 것입니다.

스토리보드 정의

먼저 스토리보드 애니메이션을 정의합니다. 혼합을 사용하거나 XAML에서 수동으로 정의할 수 있습니다. 혼합 사용에 대한 예는 단추에 스킨 및 애니메이션 효과 주기를 참조하세요. 혼합을 사용하지 않을 경우 TargetName 속성을 제거하세요. 그렇지 않으면 애니메이션이 특정 대상에만 적용됩니다. 예를 들면 다음과 같습니다.


    <Page.Resources>
        <Storyboard x:Name="TapAnimation">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </Page.Resources>

애니메이션할 특정 변환에 대한 자리 표시자뿐만 아니라 스토리보드에서 변경할 모든 XAML 개체에 <RenderTransform> 태그를 추가해야 합니다. 그렇지 않으면 앱에서 예외가 발생합니다. 다음은 스토리보드를 적용할 준비가 된 Image 개체의 예입니다.


 <Image x:Name="myImage" Width="256" Height="160" RenderTransformOrigin= "0.5,0.5" >
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>

참고  RenderTransformOrigin= "0.5,0.5" 속성을 사용하면 애니메이션이 개체의 중앙을 중심으로 배치됩니다.

스토리보드 적용

다음으로 스토리보드를 개체와 연결하고 필요에 따라 트리거합니다. 한 가지 주의할 사항이 있습니다. 애니메이션이 재생되는 동안에는 TargetName 속성을 변경할 수 없습니다. 변경할 경우 앱이 예외를 발생시킵니다. 이 문제를 방지하려면 대상을 변경하기 전에 Stop()을 호출합니다.

  GetCurrentState()를 호출하면 스토리보드가 현재 실행되고 있는지 여부를 감지할 수 있습니다.

다음은 특정 Image 개체에 대한 애니메이션을 트리거하는 코드입니다. 예를 들어 이 코드는 PointerPressed 이벤트를 사용하여 사용자가 이미지를 탭하는 동작에 대한 응답일 수 있습니다. Click 이벤트를 사용하여 Button에 애니메이션을 적용하는 것처럼 간편합니다.


 // Add using Windows.UI.Xaml.Media.Animation;
            TapAnimation.Stop();
            TapAnimation.SetValue(Storyboard.TargetNameProperty,"myImage");
            TapAnimation.Begin();

다음과 같이 이벤트를 트리거한 컨트롤에서 자동으로 새 대상 이름을 생성할 경우 이 방법이 훨씬 더 유용합니다.


  private void someImages_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            TapImage.Stop();
            TapImage.SetValue(Storyboard.TargetNameProperty, (sender as Image).Name);
            TapImage.Begin();
        }

여기서는 사용자가 탭한 Image 개체가 이벤트를 만들고 이 이름이 대상으로 사용됩니다. 탭할 때 페이지의 모든 이미지가 동일한 이벤트를 생성하는 경우 모두 동일한 스토리보드를 통해 애니메이션 효과가 적용됩니다. 따라서 키패드 예제에서는 각 키에 애니메이션 효과가 적용되며 스토리보드를 하나만 만들면 됩니다.

참고  이전에는 as 키보드가 보이지 않았을 수 있습니다. 발신자에 대해 캐스트를 수행하여 Image로 설정합니다.

여러 단추, 단일 이벤트 처리기

여러 개의 유사한 단추가 있는 앱에서는 일반적으로 각 단추에 대한 이벤트 처리기가 아니라 단일 마스터 이벤트 처리기를 포함합니다. 모든 단추에 동일한 클릭 이벤트를 사용할 수 있지만 코드에서는 단추를 구별할 수 있어야 합니다. 이때 tags를 사용하는 것이 좋습니다.

iOS에서처럼 모든 컨트롤이나 개체에는 컨트롤이나 개체를 고유하게 식별하는 데 사용할 수 있는 값인 태그가 포함될 수 있습니다. 예를 들어 키패드 예제에서는 이 XAML처럼 단추를 정의할 수 있습니다. 단추가 거의 동일하지만 태그 값별로 어떻게 다른지 살펴보세요.


	<Button Content="1" HorizontalAlignment="Left" Margin="446,78,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="1">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="2" HorizontalAlignment="Left" Margin="446,543,0,0" VerticalAlignment="Top" Width="460" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="2">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="3" HorizontalAlignment="Left" Margin="446,393,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="3">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>

모든 단추가 동일한 이벤트 처리기 Button_Click을 가리킵니다. 다음은 태그 값을 읽고 처리기 내에서 적절하게 응답할 수 있는 방법입니다.


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var tag = (sender as Button).Tag;

            int t = Convert.ToInt16(tag);

            switch (t)
            {
                case 0: break;
                case 1: break;
                case 2: break;
                default: break;
            }
        }

관련 항목

프로그래밍 방식으로 애니메이션 작업
시작: 애니메이션
방법: XAML 및 Expression Blend를 사용하여 사용자 인터페이스 만들기
스토리보드 애니메이션

 

 

표시:
© 2014 Microsoft