Поделиться через

Как: анимировать матрицу с помощью ключевых кадров

  • Статья

В этом примере показано, как с помощью ключевых кадров анимировать свойство Matrix объекта MatrixTransform.

Пример

В следующем примере анимация свойства MatrixMatrixTransformпроисходит с использованием класса MatrixAnimationUsingKeyFrames. В примере используется объект MatrixTransform для преобразования внешнего вида и положения Button.

Эта анимация использует класс DiscreteMatrixKeyFrame для создания двух ключевых кадров и выполняет следующие действия.

  1. Анимирует первый Matrix в течение первых 0,2 секунд. В примере изменяются свойства M11 и M12Matrix. Это изменение приводит к тому, что кнопка растягивается и становится искаженной. В примере также изменяются свойства OffsetX и OffsetY, чтобы кнопка сменила положение.

  2. Анимирует второй Matrix за 1,0 секунды. Кнопка перемещается в другую позицию, пока кнопка больше не смещена или растянута.

  3. Повторяет анимацию на неопределенный срок.

Заметка

Ключевые кадры, производные от объекта DiscreteMatrixKeyFrame, создают внезапные переходы между значениями, то есть движение анимации носит дерганый характер.

<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>

Для полного примера см. пример анимации ключевых кадров .

См. также