如何:在重複循環期間累加動畫值
這個範例示範如何使用 IsCumulative 屬性,在重複迴圈中累積動畫值。
範例
IsCumulative使用 屬性,在重複迴圈中累積動畫的基底值。 例如,如果您將動畫設定為重複 9 次 (= 「9x」),並將 屬性設定為在 10 到 15 之間產生動畫效果( RepeatBehavior 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應