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