方法: アニメーションを加速または減速させる

この例では、時間の経過と共にアニメーションを加速および減速させる方法を示します。 次の例では、AccelerationRatio と DecelerationRatio の異なる設定を使用したアニメーションによって複数の四角形がアニメーション化されます。

例

<!-- This example shows how to use the AccelerationRatio and 
     DecelerationRatio properties of timelines
     to make animations speed up or slow down as they progress. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:SampleControls="SampleControls"
  WindowTitle="Acceleration and Deceleration Example">
  <StackPanel Margin="20">
 
    <Rectangle Name="nonAcceleratedOrDeceleratedRectangle" Fill="#9933FF" 
      Width="10" Height="20" HorizontalAlignment="Left" />
     
    <Rectangle Name="acceleratedRectangle" Fill="#3333FF" 
      Width="10" Height="20" HorizontalAlignment="Left" />
      
    <Rectangle Name="deceleratedRectangle" Fill="#33FF66" 
      Width="10" Height="20" HorizontalAlignment="Left" />
      
    <Rectangle Name="acceleratedAndDeceleratedRectangle" Fill="#CCFF33" 
      Width="10" Height="20" HorizontalAlignment="Left" />

    <!-- Create a button to start the animations. -->
    <Button Margin="0,30,0,0" HorizontalAlignment="Left"
      Content="Start Animations">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
            
              <!-- Creates an animation without acceleration or deceleration for comparison. -->
              <DoubleAnimation         
                Storyboard.TargetName="nonAcceleratedOrDeceleratedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                Duration="0:0:10" From="20" To="400" />              

              <!-- Creates an animation that accelerates through 40% of its duration. -->
              <DoubleAnimation 
                Storyboard.TargetName="acceleratedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />
          
              <!-- Creates an animation that decelerates through 60% of its duration. -->
              <DoubleAnimation 
                Storyboard.TargetName="deceleratedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />

              <!-- Creates an animation that accelerates through 40% of its duration and
                   decelerates through the 60% of its duration. -->
              <DoubleAnimation 
                Storyboard.TargetName="acceleratedAndDeceleratedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />      
            </Storyboard>  
          </BeginStoryboard>
        </EventTrigger>      
      </Button.Triggers>         
    </Button>
  </StackPanel> 
</Page>

この例では、コードは省略されています。 詳しいコードについては、アニメーションのタイミング動作 (C#) またはアニメーションのタイミング動作 (Visual Basic) に関する記事を参照してください。