방법: 키 프레임을 사용하여 매트릭스에 애니메이션 효과 주기

이 예제에서는 키 프레임을 사용하여 MatrixTransform의 Matrix 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.

예제

다음 예제에서는 MatrixAnimationUsingKeyFrames 클래스를 사용하여 MatrixTransform의 Matrix 속성에 애니메이션 효과를 줍니다. 이 예제에서는 MatrixTransform 개체를 사용하여 Button의 모양과 위치를 변환합니다.

이 애니메이션에서는 DiscreteMatrixKeyFrame 클래스를 사용하여 두 개의 키 프레임을 만들고 다음을 수행합니다.

1. 처음 0.2초 동안 첫 번째 Matrix에 애니메이션 효과를 줍니다. 이 예제에서는 Matrix의 M11 및 M12 속성을 변경합니다. 이 변경으로 인해 단추가 늘어나고 기울어집니다. 이 예제에서는 단추 위치가 변경되도록 OffsetX 및 OffsetY 속성도 변경합니다.

2. 1.0초에서 두 번째 Matrix에 애니메이션 효과를 줍니다. 단추가 더 이상 기울어지거나 늘어나지 않는 동안 단추가 다른 위치로 이동합니다.

3. 애니메이션을 무기한 반복합니다.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

전체 샘플을 보려면 키 프레임 애니메이션 샘플을 참조하세요.

참고 항목

• Matrix
• MatrixTransform
• 키 프레임 애니메이션 개요
• 키 프레임 방법 항목