Dela via

Anvisningar: Animera storleksändringar med hjälp av nyckelramar

  • Artikel

Det här exemplet visar hur du animerar storleksändringar med hjälp av nyckelramar.

Exempel

I följande exempel används klassen SizeAnimationUsingKeyFrames för att animera egenskapen Size för en ArcSegment. Den här animeringen använder tre nyckelramar på följande sätt:

  1. Under den första halvsekunden av animeringen använder en instans av klassen LinearSizeKeyFrame för att gradvis öka bågens storlek. Linjära nyckelramar som LinearSizeKeyFrame skapar en smidig linjär övergång mellan värdena.

  2. I slutet av den nästa halva sekunden använder en instans av klassen DiscreteSizeKeyFrame för att plötsligt öka bågens storlek. Diskreta nyckelramar som DiscreteSizeKeyFrame skapar plötsliga hopp mellan värden, det vill säga att storleksändringarna sker plötsligt och är inte subtila.

  3. Under de sista två sekunderna använder en instans av klassen SplineSizeKeyFrame för att öka bågens storlek. Spline-nyckelramar som SplineSizeKeyFrame skapar en variabel övergång mellan värden enligt värdena för egenskapen KeySpline. I det här exemplet ökar bågens storlek långsamt först och ökar sedan exponentiellt mot slutet av tidssegmentet.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>
                
                <!-- Animating the Size property uses 3 KeyFrames. -->
                <SizeAnimationUsingKeyFrames
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size" >
                  <SizeAnimationUsingKeyFrames.KeyFrames>
                    <!-- Using a LinearSizeKeyFrame, the size of the arc increases
                         gradually over the first half second of the animation. -->
                    <LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />

                    <!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
                    after the first second of the animation. -->
                    <DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />

                    <!-- Using a SplineSizeKeyFrame, the Size increases slowly at first 
                         and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
                    <SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />

                  </SizeAnimationUsingKeyFrames.KeyFrames>
                </SizeAnimationUsingKeyFrames>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

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

Se även