방법: 키 프레임을 사용하여 매트릭스에 애니메이션 효과 주기
업데이트: 2007년 11월
이 예제에서는 키 프레임을 사용하여 MatrixTransform의 Matrix 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.
예제
다음 예제에서는 MatrixAnimationUsingKeyFrames 클래스를 사용하여 MatrixTransform의 Matrix 속성에 애니메이션 효과를 줍니다. 이 예제에서는 MatrixTransform 개체를 사용하여 Button의 모양과 위치를 변경합니다.
이 애니메이션은 DiscreteMatrixKeyFrame 클래스를 사용하여 키 프레임 두 개를 만든 후 다음과 같은 작업을 수행합니다.
처음 0.2초 동안 첫 번째 Matrix에 애니메이션 효과를 줍니다. 이 예제에서는 Matrix의 M11 및 M12 속성을 변경합니다. 이렇게 하면 단추가 늘어나고 기울어집니다. 이 예제에서는 OffsetX 및 OffsetY 속성도 변경하여 단추의 위치도 변경합니다.
1.0초 지점에서 두 번째 Matrix에 애니메이션 효과를 줍니다. 단추가 더 이상 늘어나거나 기울어지지 않고 다른 위치로 이동합니다.
애니메이션을 무한 반복합니다.
참고
DiscreteMatrixKeyFrame 개체에서 파생된 키 프레임에서는 값 간에 급격한 점프 효과를 만듭니다. 즉, 애니메이션이 급격하게 움직입니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MatrixAnimationUsingPath Example">
<StackPanel Margin="20">
<Canvas HorizontalAlignment="Left" Width="340" Height="240" >
<!-- The Button that is animated. -->
<Button Margin="-30,0,0,0" MinWidth="100">
Click
<Button.RenderTransform>
<MatrixTransform x:Name="myMatrixTransform">
<MatrixTransform.Matrix >
<Matrix OffsetX="10" OffsetY="100"/>
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animates the button's MatrixTransform using MatrixAnimationUsingKeyFrames.
Animates to first Matrix in the first 0.2 seconds, to second Matrix in the next
second, and then starts over. Notice that the first KeyFrame stretches the button
and skews it using the M11 and M12 Matrix properties respectively. Also, animations are
using Discrete interpolation, so the MatrixTransform appears to "jump" from one value
to the next. -->
<MatrixAnimationUsingKeyFrames
Storyboard.TargetName="myMatrixTransform"
Storyboard.TargetProperty="Matrix"
Duration="0:0:3"
RepeatBehavior="Forever">
<DiscreteMatrixKeyFrame KeyTime="0:0:0.2">
<DiscreteMatrixKeyFrame.Value>
<Matrix OffsetX="100" OffsetY="200" M11="3" M12="1" />
</DiscreteMatrixKeyFrame.Value>
</DiscreteMatrixKeyFrame>
<DiscreteMatrixKeyFrame KeyTime="0:0:1">
<DiscreteMatrixKeyFrame.Value>
<Matrix OffsetX="300" OffsetY="100" M11="1" M12="0" />
</DiscreteMatrixKeyFrame.Value>
</DiscreteMatrixKeyFrame>
</MatrixAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</StackPanel>
</Page>
전체 샘플을 보려면 KeyFrame 애니메이션 샘플을 참조하십시오.