方法 : "From"、"To"、および "By" を使用してアニメーションを制御する
"From/To/By" または "基本アニメーション" では 2 つのターゲット値の間の遷移が作成されます (さまざまな種類のアニメーションの概要については「アニメーションの概要」を参照してください)。 基本アニメーションのターゲット値を設定するには、From、To、および By の各プロパティを使用します。 From、To、By の各プロパティを組み合わせて使用した場合または単独で使用した場合に、アニメーションのターゲット値がどのように決定されるかを次の表にまとめます。
指定するプロパティ |
結果として生じる動作 |
|---|---|
アニメーションは、From プロパティで指定した値から、アニメーション化するプロパティの基本値または前のアニメーションの出力値 (前のアニメーションの構成によります) まで進行します。 |
|
アニメーションは、From プロパティで指定した値から、From プロパティおよび By プロパティの合計によって指定した値まで進行します。 |
|
アニメーションは、アニメーション化したプロパティの基本値または前のアニメーションの出力値から、To プロパティで指定した値まで進行します。 |
|
アニメーションは、アニメーション化するプロパティの基本値または前のアニメーションの出力値から、この基本値または出力値と By プロパティで指定した値の合計まで進行します。 |
.gif "メモ") メモ |
|---|
他の補間方式を使用したり、3 つ以上のターゲット値の間でアニメーション化したりするには、キー フレーム アニメーションを使用します。 詳細については、「キー フレーム アニメーションの概要」を参照してください。
複数のアニメーションを 1 つのプロパティに適用する方法については、「キー フレーム アニメーションの概要」を参照してください。
アニメーションで To、By、From の各プロパティを設定した場合のさまざまな効果を次の例に示します。
使用例
<!-- This example shows the different effects of setting
To, By, and From properties on animations. -->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>