Nasıl yapılır: Bir Animasyonu Gelen, İçin ve Göre Kullanarak Denetleme

"Gelen/Gelen/By" veya "temel animasyon" iki hedef değer arasında bir geçiş oluşturur (farklı animasyon türlerine giriş için bkz. Animasyona Genel Bakış). Temel bir animasyonun hedef değerlerini ayarlamak için , From ve To özelliklerini By kullanın. Aşağıdaki tabloda, , ve özelliklerinin bir animasyonun hedef değerlerini belirlemek için birlikte veya From To ayrı olarak nasıl By kullanılası özetlenmiştir.

Belirtilen özellikler Sonuç davranış
From Animasyon, özelliği tarafından belirtilen değerden animasyonlu özelliğin temel değerine veya önceki animasyonun nasıl yapılandırıldıklarına bağlı olarak önceki animasyonun çıkış From değerine ilerler.
From ve To Animasyon, özelliği tarafından belirtilen değerden From özelliği tarafından belirtilen değere To ilerler.
From ve By Animasyon, özelliği tarafından belirtilen değerden ve özelliklerinin From toplamı tarafından belirtilen değere From By ilerler.
To Animasyon, animasyonlu özelliğin temel değerinden veya önceki bir animasyonun çıkış değerinden özelliği tarafından belirtilen değere To ilerler.
By Animasyon, animasyonlu özelliğin temel değerinden veya önceki bir animasyonun çıkış değerinden bu değerin toplamına ve özelliği tarafından belirtilen değere doğru By ilerler.

Not

Hem özelliğini hem de To özelliğini By aynı animasyonda ayarlayabilirsiniz.

Diğer ilişkilendirme yöntemlerini kullanmak veya ikiden fazla hedef değer arasında animasyon oluşturmak için bir anahtar çerçeve animasyonu kullanın. Daha fazla bilgi için bkz. Anahtar Çerçeve Animasyonlara Genel Bakış.

Tek bir özellik için birden çok animasyon uygulama hakkında bilgi için bkz. Anahtar Çerçeve Animasyonlarına Genel Bakış.

Aşağıdaki örnekte animasyonlarda , ve özelliklerini To By ayarlamanın From farklı etkileri gösterilmiştir.

Örnek

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

Ayrıca bkz.