Sdílet prostřednictvím

Jak na to: Animace matice pomocí klíčových snímků

  • Článek

Tento příklad ukazuje, jak animovat Matrix vlastnost MatrixTransform pomocí klíčových snímků.

Příklad

Následující příklad používá třídu MatrixAnimationUsingKeyFrames k animaci vlastnosti Matrix z MatrixTransform. Příklad používá objekt MatrixTransform k transformaci vzhledu a umístění Button.

Tato animace používá třídu DiscreteMatrixKeyFrame k vytvoření dvou klíčových snímků a s nimi provede následující:

  1. Animuje první Matrix během prvních 0,2 sekund. Příklad změní u Matrixvlastnosti M11 a M12. Tato změna způsobí, že se tlačítko roztáhne a deformuje. Příklad také změní vlastnosti OffsetX a OffsetY tak, aby se tlačítko přesunulo na jinou pozici.

  2. Animuje druhý Matrix v čase 1,0 sekundy. Tlačítko se přesune na jinou pozici a už není zkosené nebo roztažené.

  3. Zopakuje animaci po neomezenou dobu.

Poznámka

Klíčové snímky odvozené z objektu DiscreteMatrixKeyFrame způsobují náhlé skoky mezi hodnotami, což znamená, že pohyb animace je trhaný.

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

Pro kompletní příklad se podívejte na ukázku animace klíčových snímků .

Viz také