Dela via

Anvisningar: Animera en matris med hjälp av nyckelramar

  • Artikel

Det här exemplet visar hur du animerar egenskapen Matrix för en MatrixTransform med hjälp av nyckelramar.

Exempel

I följande exempel används klassen MatrixAnimationUsingKeyFrames för att animera egenskapen Matrix för en MatrixTransform. I exemplet används objektet MatrixTransform för att transformera utseendet och positionen för en Button.

Den här animeringen använder klassen DiscreteMatrixKeyFrame för att skapa två nyckelramar och gör följande med dem:

  1. Animerar Matrix under de första 0,2 sekunderna. I exemplet ändras egenskaperna M11 och M12 för Matrix. Den här ändringen gör att knappen sträcks ut och blir skev. Exemplet ändrar även egenskaperna OffsetX och OffsetY så att knappen ändrar position.

  2. Animerar den andra Matrix på 1,0 sekunder. Knappen flyttas till en annan position medan knappen inte längre är skev eller utsträckt.

  3. Upprepar animeringen på obestämd tid.

Note

Nyckelramar som härleds från DiscreteMatrixKeyFrame-objektet skapar plötsliga hopp mellan värden, det vill ex. animeringens rörelse är ryckig.

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

Det fullständiga exemplet finns i Exempel på keyframe-animering.

Se även