方法: "From"、"To"、および "By" を使用してアニメーションを制御する
"From/To/By" または "基本アニメーション" では、2 つのターゲット値の間の遷移が作成されます (さまざまな種類のアニメーションの概要については、「アニメーションの概要」をご覧ください)。 基本アニメーションのターゲット値を設定するには、From、To、By の各プロパティを使用します。 次の表は、From、To、By の各プロパティを組み合わせて使用するか、個別に使用して、アニメーションのターゲット値を決定する方法をまとめたものです。
指定するプロパティ | 結果として生じる動作 |
---|---|
From | アニメーションは、From プロパティで指定した値から、アニメーション化対象のプロパティの基本値または前のアニメーションの出力値 (前のアニメーションの構成によります) まで進行します。 |
From および To | アニメーションは、From プロパティで指定した値から To プロパティで指定した値まで進行します。 |
From および By | アニメーションは、From プロパティで指定した値から、From プロパティと By プロパティの合計で指定した値まで進行します。 |
To | アニメーションは、アニメーション化対象のプロパティの基本値または前のアニメーションの出力値から、To プロパティで指定した値まで進行します。 |
By | アニメーションは、アニメーション化対象のプロパティの基本値または前のアニメーションの出力値から、その値と By プロパティで指定した値の合計まで進行します。 |
他の補間方式を使用したり、3 つ以上のターゲット値の間でアニメーション化したりするには、キー フレーム アニメーションを使用します。 詳細については、「キー フレーム アニメーションの概要」をご覧ください。
複数のアニメーションを 1 つのプロパティに適用する方法については、「キー フレーム アニメーションの概要」をご覧ください。
次の例は、To、By、From の各プロパティを設定したときのアニメーションへのさまざまな効果を示しています。
例
<!-- 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>
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback