방법: 주기가 반복되는 동안 애니메이션 값 누적
이 예제에서는 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>