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

В этом примере демонстрируется анимация Matrix свойство MatrixTransform с помощью ключевых кадров.

Пример

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

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

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

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

  3. Циклическое повторение анимации.

Note

Ключевые кадры, которые являются производными от 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>

Описание полного примера см. в разделе Пример анимации по ключевым кадрам.

См. также