Bagikan melalui

Cara: Menganimasikan Perubahan Ukuran dengan Menggunakan Bingkai Kunci

Contoh ini menunjukkan cara menganimasikan perubahan ukuran dengan menggunakan bingkai kunci.

Contoh

Contoh berikut menggunakan kelas SizeAnimationUsingKeyFrames untuk menganimasikan properti Size dari ArcSegment. Animasi ini menggunakan tiga bingkai kunci dengan cara berikut:

  1. Selama paruh pertama detik animasi, menggunakan instans kelas LinearSizeKeyFrame untuk secara bertahap meningkatkan ukuran busur. Bingkai kunci linier seperti LinearSizeKeyFrame membuat transisi linier yang halus antar nilai.

  2. Pada akhir paruh detik berikutnya, menggunakan instans kelas DiscreteSizeKeyFrame untuk tiba-tiba meningkatkan ukuran busur. Bingkai kunci diskrit seperti DiscreteSizeKeyFrame menciptakan lompatan tiba-tiba di antara nilai, yaitu perubahan ukuran terjadi tiba-tiba dan tidak halus.

  3. Selama dua detik terakhir, menggunakan instans kelas SplineSizeKeyFrame untuk meningkatkan ukuran busur. Bingkai kunci spline seperti SplineSizeKeyFrame membuat transisi variabel antar nilai sesuai dengan nilai properti KeySpline. Dalam contoh ini, ukuran busur meningkat perlahan pada awalnya dan kemudian meningkat secara eksponensial menuju akhir segmen waktu.

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

Untuk sampel lengkapnya, lihat Sampel Animasi KeyFrame .

Lihat juga