From/To/By アニメーションの概要
更新 : 2007 年 11 月
ここでは、From/To/By アニメーションを使用して依存関係プロパティをアニメーション化する方法について説明します。From/To/By アニメーションでは、2 つの値の間の遷移が作成されます。
このトピックは、次のセクションで構成されています。
必要条件
このトピックを理解するには、WPF のアニメーション機能に精通している必要があります。アニメーション機能の概要については、「アニメーションの概要」を参照してください。
From/To/By アニメーションとは
From/To/By アニメーションは、開始値と終了値の間の遷移を作成する AnimationTimeline の一種です。遷移の完了に要する時間は、そのアニメーションの Duration によって決まります。
マークアップとコードで Storyboard を使用することにより、またはコードで BeginAnimation メソッドを使用することで、From/To/By アニメーションをプロパティに適用できます。また、From/To/By アニメーションを使用して AnimationClock を作成し、1 つ以上のプロパティに適用することもできます。アニメーションを適用するさまざまな方法の詳細については、「プロパティ アニメーションの手法の概要」を参照してください。
From/To/By アニメーションで指定できるターゲット値は 2 つまでです。3 つ以上のターゲット値を持つアニメーションが必要な場合は、キー フレーム アニメーションを使用してください。キー フレーム アニメーションについては、「キー フレーム アニメーションの概要」を参照してください。
From/To/By アニメーションの種類
アニメーションによってプロパティ値が生成されるため、さまざまなプロパティ型に対応するさまざまな種類のアニメーションが存在します。Double を受け取るプロパティ (要素の Width プロパティなど) をアニメーション化するには、Double 値を生成するアニメーションを使用します。Point を受け取るプロパティをアニメーション化するには、Point 値を生成するアニメーションを使用します。他も同様です。
From/To/By アニメーション クラスは System.Windows.Media.Animation 名前空間に属し、次の名前付け規則を使用します。
*<Type>*Animation
ここで、<Type> はクラスによってアニメーション化される値の型です。
WPF には、次の From/To/By アニメーション クラスが用意されています。
プロパティの型 |
対応する From/To/By アニメーション クラス |
|---|---|
ターゲット値
From/To/By アニメーションでは、2 つのターゲット値の間の遷移が作成されます。開始値 (From プロパティを使用して設定) と終了値 (To プロパティを使用して設定) を指定するのが一般的です。ただし、開始値だけ、終点の値だけ、またはオフセット値だけを指定することもできます。これらの場合、アニメーションは、足りないターゲット値をアニメーション化しているプロパティから取得します。アニメーションのターゲット値を指定するさまざまな方法を次に示します。
開始値
アニメーションの開始値を明示的に指定する場合は、From プロパティを使用します。From プロパティだけで使用することも、To プロパティまたは By プロパティと共に使用することもできます。From プロパティだけを指定した場合は、アニメーションはその値から、アニメーション化されているプロパティの基本値まで遷移します。
終了値
アニメーションの終了値を指定するには、To プロパティを使用します。To プロパティだけを使用すると、アニメーションは開始値を、アニメーション化されているプロパティから、または同じプロパティに適用されている別のアニメーションから取得します。To プロパティと From プロパティを一緒に使用することで、アニメーションの開始値と終了値を明示的に指定できます。
オフセット値
By プロパティを使用すると、アニメーションの明示的な開始値と終了値の代わりに、オフセットを指定できます。アニメーションの By プロパティは、継続時間中にアニメーションが変更する値の大きさを指定します。By プロパティだけで使用することも、From プロパティと共に使用することもできます。By プロパティだけを指定した場合は、プロパティの基本値または別のアニメーションの出力に、オフセット値が追加されます。
From/To/By 値の使用
以下では、From、To、By の各プロパティを、一緒に、または個別に使用する方法を説明します。
このセクションの各例では、From/To/By アニメーションの一種である DoubleAnimation を使用し、高さが 10 デバイス非依存ピクセルで幅が 100 デバイス非依存ピクセルの Rectangle の Width プロパティをアニメーション化します。
各例では DoubleAnimation を使用しますが、すべての From/To/By アニメーションの From、To、By プロパティの動作はまったく同じです。これらの例では Storyboard を使用しますが、別の方法で From/To/By アニメーションを使用することもできます。詳細については、「プロパティ アニメーションの手法の概要」を参照してください。
From/To
From 値と To 値を設定すると、アニメーションは、From プロパティで指定されている値から、To プロパティで指定されている値まで進行します。
次の例では、DoubleAnimation の From プロパティを 50 に設定し、To プロパティを 300 に設定しています。その結果、Rectangle の Width は、50 から 300 までアニメーション化されます。
// Demonstrates the From and To properties used together.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;
// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Black">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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="Width"
From="50" To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To
To プロパティだけを設定すると、アニメーションは、アニメーション化されているプロパティの基本値から、または同じプロパティに対して先に適用されている構成アニメーションの出力から、To プロパティで指定されている値まで進行します。
"構成アニメーション" とは、同じプロパティに対して以前に適用されていて、現在のアニメーションが Compose ハンドオフ動作を使用して適用された時点でまだ有効であった、Active アニメーションまたは Filling アニメーションのことです。
次の例では、DoubleAnimation の To プロパティだけを 300 に設定しています。開始値は指定されていないので、DoubleAnimation は、Width プロパティの基本値 (100) を開始値として使用します。Rectangle の Width は、100 から、アニメーションのターゲット値である 300 までアニメーション化されます。
// Demonstrates the use of the To property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;
// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Gray">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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="Width"
To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
By
アニメーションの By プロパティだけを設定すると、アニメーションは、アニメーション化されているプロパティの基本値から、または構成アニメーションの出力から、これらの値に By プロパティで指定されている値を加えた合計値まで進行します。
次の例では、DoubleAnimation の By プロパティだけを 300 に設定しています。開始値は指定されていないので、DoubleAnimation は、Width プロパティの基本値である 100 を開始値として使用します。終了値は、アニメーションの By の値 300 を開始値 100 に加えた値 400 になります。結果として、Rectangle の Width は、100 から 400 までアニメーション化されます。
// Demonstrates the use of the By property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;
// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="RoyalBlue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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="Width"
By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From/By
アニメーションの From プロパティと By プロパティを設定すると、アニメーションは、From プロパティで指定されている値から、From プロパティと By プロパティの合計で指定される値まで進行します。
次の例では、DoubleAnimation の From プロパティが 50 に、By プロパティが 300 に設定されています。終了値は、アニメーションの By の値 300 を開始値 50 に加えた値 350 になります。結果として、Rectangle の Width は、50 から 350 までアニメーション化されます。
// Demonstrates the use of the From and By properties.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;
// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="BlueViolet">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and By properties used by 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="Width"
From="50" By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From
アニメーションの From 値だけを指定すると、アニメーションは、From プロパティで指定されている値から、アニメーション化されているプロパティの基本値、または構成アニメーションの出力まで進行します。
次の例では、DoubleAnimation の From プロパティだけを 50 に設定しています。終了値は指定されていないので、DoubleAnimation は、Width プロパティの基本値 100 を終了値として使用します。Rectangle の Width は、50 から、Width プロパティの基本値 100 までアニメーション化されます。
// Demonstrates the use of the From property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;
// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the From property. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Purple">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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="Width"
From="50" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To/By
To プロパティと By プロパティの両方を設定した場合は、By プロパティは無視されます。
他のアニメーションの種類
WPF が提供するアニメーションの種類は、From/To/By アニメーションだけではありません。キー フレーム アニメーションとパス アニメーションも提供されています。
キー フレーム アニメーションは、キー フレームを使用して記述される複数の終了値に沿ってアニメーション化を行います。詳細については、「キー フレーム アニメーションの概要」を参照してください。
パス アニメーションは、PathGeometry から出力値を生成します。詳細については、「パス アニメーションの概要」を参照してください。
WPF では、独自のカスタム アニメーションの種類を作成することもできます。詳細については、「カスタム アニメーションの概要」を参照してください。
参照
処理手順
アニメーションのターゲット値 (From、To、および By) のサンプル