方法 : 反復サイクル中にアニメーション値を累積する
更新 : 2007 年 11 月
この例では、IsCumulative プロパティを使用して、反復サイクル中にアニメーション値を累積する方法を示します。
使用例
IsCumulative プロパティを使用して、反復サイクル中にアニメーションの基本値を累積します。たとえば、アニメーションを 9 回反復 (RepeatBehavior = “9x”) するように設定し、10 から 15 までアニメーション化する (From = 10 To = 15) ようにプロパティを設定した場合、プロパティは、最初のサイクルでは 10 から 15 まで、2 回目のサイクルでは 15 から 20 まで、3 回目のサイクルでは 20 から 25 までというようにアニメーション化します。つまり、前のアニメーション サイクルの終了値が、各アニメーション サイクルの基本値として使用されることになります。
IsCumulative プロパティは、ほとんどの基本アニメーションとキー フレーム アプリケーションで使用できます。詳細については、「アニメーションの概要」および「キー フレーム アニメーションの概要」を参照してください。
次の例では、4 つの四角形の幅をアニメーション化してこの動作を示します。この例では、次の操作を実行します。
DoubleAnimation で最初の四角形をアニメーション化し、IsCumulative プロパティを true に設定します。
DoubleAnimation で 2 番目の四角形をアニメーション化し、IsCumulative プロパティを既定値の false に設定します。
DoubleAnimationUsingKeyFrames で 3 番目の四角形をアニメーション化し、IsCumulative プロパティを true に設定します。
DoubleAnimationUsingKeyFrames で最後の四角形をアニメーション化し、IsCumulative プロパティを false に設定します。
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Margin="20" >
<!-- This rectangle is animated with DoubleAnimation and IsCumulative set to "True". -->
<Rectangle Name="withIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimation and IsCumulative set to "False". -->
<Rectangle Name="withoutIsCumulative"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsCumulative set to "True". -->
<Rectangle Name="withIsCumulativeUsingKeyFrames"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsCumulative set to "False". -->
<Rectangle Name="withoutIsCumulativeUsingKeyFrames"
Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- Create a button to restart the animations. -->
<Button Margin="0,30,0,0" HorizontalAlignment="Left">
Restart Animations
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- DoubleAnimation with IsCumulative set to "True". Because IsCumulative is set to "True",
the base values of the animation will accumulate over repeat cycles. In this example, the
first iteration will be from 100 to 200, the second will be from 200 to 300, the third from
300 to 400, etc. -->
<DoubleAnimation
Storyboard.TargetName="withIsCumulative"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="True"
Duration="0:0:3" From="100" To="200" />
<!-- DoubleAnimation with IsCumulative set to "False". The starting value 100 pixels and repeat
cycles do not build on earlier ones. -->
<DoubleAnimation
Storyboard.TargetName="withoutIsCumulative"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="False"
Duration="0:0:3" From="100" To="200" />
<!-- DoubleAnimationUsingKeyFrames with IsCumulative set to "True". Similar to the DoubleAnimation
above, the base value of each cycle builds on the last one. Note that the output value
is the total output value from all the key frames for a total output of 100 pixels. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="withIsCumulativeUsingKeyFrames"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="True" >
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
<!-- DoubleAnimationUsingKeyFrames with IsCumulative set to "False". The base value of each cycle
does not build on the last one. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="withoutIsCumulativeUsingKeyFrames"
Storyboard.TargetProperty="Width"
RepeatBehavior="4x"
AutoReverse="True"
IsCumulative="False" >
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="130" KeyTime="0:0:1" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
参照
処理手順
方法 : アニメーションの出力値をアニメーションの開始値に追加する