方法: From、To、By を使用してアニメーションを制御する

[アーティクル]
12/18/2024

"開始/終了/通過" または "基本アニメーション" は、2 つのターゲット値間の遷移を作成します (さまざまな種類のアニメーションの概要については「アニメーションの概要」を参照してください)。基本アニメーションのターゲット値を設定するには、その From、To、および By プロパティを使用します。次の表は、アニメーションのターゲット値を決定するために、From、To、および By プロパティを組み合わせて、または個別に使用する方法をまとめたものです。

指定されたプロパティ	結果としての振る舞い
From	アニメーションは、From プロパティで指定された値から、アニメーション化されるプロパティの基本値、または前のアニメーションの出力値まで、前のアニメーションの構成方法に応じて進行します。
From と To	アニメーションは、From プロパティで指定された値から、To プロパティで指定された値まで進行します。
From と By	アニメーションは、From プロパティで指定された値から、From プロパティと By プロパティの合計で指定された値まで進行します。
To	アニメーションは、アニメーション化されたプロパティの基本値または前のアニメーションの出力値から、To プロパティで指定された値まで進行します。
By	アニメーションは、アニメーション化されているプロパティの基本値または前のアニメーションの出力値から、その値と By プロパティで指定された値の合計まで進行します。

手記

同じアニメーションでは、To プロパティと By プロパティの両方を設定しないでください。

他の補間方法を使用したり、複数のターゲット値の間でアニメーション化したりするには、キーフレームアニメーションを使用します。詳細については、「Key-Frame アニメーションの概要」を参照してください。

1 つのプロパティに複数のアニメーションを適用する方法については、「Key-Frame アニメーションの概要」を参照してください。

次の例は、アニメーションに対する 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>

次の方法で共有

方法: From、To、By を使用してアニメーションを制御する

例

関連項目

その他のリソース