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

Обновлен: Ноябрь 2007

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

Пример

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

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

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

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

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

Примечание.
Полные кадры, производные от объекта 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>

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

См. также

Задачи

Пример анимации с ключевыми кадрами

Основные понятия

Общие сведения об анимации по ключевым кадрам

Ссылки

Matrix

MatrixTransform

Другие ресурсы

Практические руководства, посвященные анимации по полным кадрам