Nasıl yapılır: Anahtar Çerçeveler Kullanarak Boyut Değişikliklerine Animasyon Ekleme

Bu örnek, anahtar çerçeveler kullanarak boyut değişikliklerinin nasıl hareketlendirileceğini gösterir.

Örnek

Aşağıdaki örnek, SizeAnimationUsingKeyFrames öğesinin özelliğine animasyon uygulamak için sınıfını kullanır SizeArcSegment . Bu animasyon üç anahtar çerçevesini aşağıdaki şekilde kullanır:

  1. Animasyonun ilk yarı saniyesi sırasında, her bir LinearSizeKeyFrame yay boyutunu kademeli olarak artırmak için sınıfının bir örneğini kullanır. LinearSizeKeyFrame Değerler arasında düz bir doğrusal geçiş oluşturma gibi doğrusal anahtar çerçeveler.

  2. Sonraki yarı saniyenin sonunda, daha sonra DiscreteSizeKeyFrame yay boyutunu büyütmek için sınıfının bir örneğini kullanır. DiscreteSizeKeyFrame Değerler arasında ani zıplamalar oluşturma gibi ayrık anahtar çerçeveler, diğer bir deyişle, boyut değişiklikleri aniden meydana gelir ve hafif değildir.

  3. Son iki saniye boyunca, SplineSizeKeyFrame yay boyutunu artırmak için sınıfının bir örneğini kullanır. SplineSizeKeyFrame Özelliğin değerlerine göre değerler arasında değişken geçişi oluşturma gibi eğri anahtar çerçeveleri KeySpline . Bu örnekte, yay boyutu ilk başta yavaş artar ve zaman diliminin sonuna doğru katlanarak artar.

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

Tüm örnek için bkz. ana kare animasyon örneği.

Ayrıca bkz.