Aracılığıyla paylaş

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

  • Makale

"Başlangıç/Bitiş/Başlangıç" veya "temel animasyon" iki hedef değer arasında geçiş oluşturur (farklı animasyon türlerine giriş için bkz . Animasyona Genel Bakış ). Temel animasyonun hedef değerlerini ayarlamak için , Tove By özelliklerini kullanınFrom. Aşağıdaki tabloda, , Tove By özelliklerinin animasyonların Fromhedef değerlerini belirlemek için birlikte veya ayrı ayrı nasıl kullanılabileceğini özetlemektedir.

Belirtilen özellikler Sonuç davranış
From Animasyon, özelliği tarafından From belirtilen değerden animasyonlu özelliğin temel değerine veya önceki animasyonun nasıl yapılandırıldığına bağlı olarak önceki bir animasyonun çıkış değerine ilerler.
From ve To Animasyon özelliği tarafından belirtilen değerden özelliği tarafından From belirtilen değere ilerler To .
From ve By Animasyon, özelliği tarafından From belirtilen değerden ve By özelliklerinin toplamı tarafından belirtilen değere From ilerler.
To Animasyon, animasyonlu özelliğin temel değerinden veya önceki bir animasyon çıktı değerinden özelliği tarafından belirtilen değere ilerler To .
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 kadar ilerler By .

Dekont

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

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

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

Aşağıdaki örnekte animasyonlarda , Byve From özelliklerinin ayarlanmasının Tofarklı etkileri gösterilmektedir.

Ö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.