Bagikan melalui

Cara: Mengontrol Animasi menggunakan Dari, Ke, dan Oleh

  • Artikel

"Dari/Ke/Oleh" atau "animasi dasar" membuat transisi antara dua nilai target (lihat Gambaran Umum Animasi untuk pengenalan jenis animasi yang berbeda). Untuk mengatur nilai target animasi dasar, gunakan Fromproperti , , Todan By . Tabel berikut ini meringkas bagaimana Fromproperti , To, dan By dapat digunakan bersama-sama atau secara terpisah untuk menentukan nilai target animasi.

Properti yang ditentukan Perilaku yang dihasilkan
From Animasi berlanjut dari nilai yang ditentukan oleh From properti ke nilai dasar properti yang dianimasikan atau ke nilai output animasi sebelumnya, tergantung pada bagaimana animasi sebelumnya dikonfigurasi.
From dan To Animasi berlanjut dari nilai yang ditentukan oleh From properti ke nilai yang ditentukan oleh To properti .
From dan By Animasi berlanjut dari nilai yang ditentukan oleh From properti ke nilai yang ditentukan oleh jumlah From properti dan By .
To Animasi berlanjut dari nilai dasar properti animasi atau nilai output animasi sebelumnya ke nilai yang ditentukan oleh To properti .
By Animasi berlanjut dari nilai dasar properti yang dianimasikan atau nilai output animasi sebelumnya ke jumlah nilai tersebut dan nilai yang ditentukan oleh By properti .

Catatan

Jangan atur To properti dan properti pada By animasi yang sama.

Untuk menggunakan metode interpolasi lain atau menganimasikan antara lebih dari dua nilai target, gunakan animasi bingkai kunci. Lihat Gambaran Umum Animasi Key-Frame untuk informasi selengkapnya.

Untuk informasi tentang menerapkan beberapa animasi ke satu properti, lihat Gambaran Umum Animasi Key-Frame.

Contoh di bawah ini menunjukkan efek pengaturan To, By, dan From properti yang berbeda pada animasi.

Contoh

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- Demonstrates the From and To properties used together.
                 Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromToAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- Demonstrates the To property used by itself.
                 Animates the Rectangle's Width property from its base value
                 (100) to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="toAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- Demonstrates the By property used by itself.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from its base value
                 (100) to 400 (100 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="byAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- Demonstrates the From and By properties used together.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from 50
                 to 350 (50 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- Demonstrates the From property used by itself.
                 Animates the rectangle's Width property from 50 to its base value (100)
                 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

Baca juga