Udostępnij za pośrednictwem

Jak animować zmiany rozmiaru z wykorzystaniem klatek kluczowych

  • Artykuł

W tym przykładzie pokazano, jak animować zmiany rozmiaru przy użyciu klatek kluczowych.

Przykład

W poniższym przykładzie użyto SizeAnimationUsingKeyFrames klasy do animowania Size właściwości klasy ArcSegment. Ta animacja używa trzech klatek kluczowych w następujący sposób:

  1. W pierwszej połowie animacji używa wystąpienia LinearSizeKeyFrame klasy, aby stopniowo zwiększać rozmiar łuku. Klatki klawiszy liniowych, takie jak LinearSizeKeyFrame tworzenie płynnego przejścia liniowego między wartościami.

  2. Na koniec następnej połowy używa wystąpienia DiscreteSizeKeyFrame klasy, aby nagle zwiększyć rozmiar łuku. Dyskretne ramki kluczy, takie jak DiscreteSizeKeyFrame tworzenie nagłych skoków między wartościami, czyli nagłe zmiany rozmiaru występują nagle i nie są subtelne.

  3. W ciągu ostatnich dwóch sekund używa wystąpienia SplineSizeKeyFrame klasy, aby zwiększyć rozmiar łuku. Ramki klucza spline, takie jak SplineSizeKeyFrame tworzenie zmiennej przejścia między wartościami KeySpline właściwości. W tym przykładzie rozmiar łuku rośnie powoli, a następnie zwiększa się wykładniczo w kierunku końca segmentu czasu.

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

Pełny przykład można znaleźć w temacie KeyFrame Animation Sample (Przykład animacji klatek kluczowych).

Zobacz też