HOW TO：在重複循環期間累加動畫值
更新：2007 年 11 月
本範例說明如何使用 IsCumulative 屬性在重複循環期間累加動畫值。
範例
使用 IsCumulative 屬性在重複循環期間累加動畫的基底值。例如，假設您設定動畫重複 9 次 (RepeatBehavior = “9x”) 並設定屬性在 10 與 15 之間顯示動畫 (From = 10 To = 15)，那麼屬性在第一次循環期間會在 10 到 15 之間顯示動畫、第二次循環期間在 15 到 20 之間顯示動畫，第三次循環在 20 到 25 之間顯示動畫，以此類推。因此，每次動畫循環會使用前次動畫循環的結束動畫值做為基底值。
IsCumulative 屬性可以用於大多數基本動畫和多數的主要畫面格動畫。如需詳細資訊，請參閱動畫概觀和主要畫面格動畫概觀。
下列範例會將四個矩形的寬度顯示為動畫，以示範這個行為。這個範例會：
使用 DoubleAnimation 將第一個矩形顯示為動畫，並將 IsCumulative 屬性設為 true。
使用 DoubleAnimation 將第二個矩形顯示為動畫，並將 IsCumulative 屬性設為 false 的預設值。
使用 DoubleAnimationUsingKeyFrames 將第三個矩形顯示為動畫，並將 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>