方法: アニメーションを加速または減速する
この例では、アニメーションを時間の経過と同時に加速および減速させる方法を示します。 次の例では、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)を参照してください。
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback