다음을 통해 공유

방법: 애니메이션 시작 값에 애니메이션 출력 값 추가

  • 아티클

이 예제에서는 애니메이션 시작 값에 애니메이션 출력 값을 추가하는 방법을 보여 줍니다.

예제

IsAdditive 속성은 애니메이션의 출력 값을 애니메이션 속성의 시작 값(기본 값)에 추가할지 여부를 지정합니다. 대부분의 기본 애니메이션 및 대부분의 키 프레임 애니메이션에서 IsAdditive 속성을 사용할 수 있습니다. 자세한 내용은 애니메이션 개요 및 키 프레임 애니메이션 개요를 참조하세요.

다음 예제에서는 DoubleAnimation과 함께 DoubleAnimation.IsAdditive 속성을 사용하고 DoubleAnimationUsingKeyFrames와 함께 DoubleAnimationUsingKeyFrames.IsAdditive 속성을 사용할 때의 효과를 보여 줍니다.

<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 IsAdditive set to "True". -->
    <Rectangle Name="withIsAdditive"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimation and IsAdditive set to "False". -->
    <Rectangle Name="withoutIsAdditive"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsAdditive set to "True". -->
    <Rectangle Name="withIsAdditiveUsingKeyFrames"
      Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />

    <!-- This rectangle is animated with DoubleAnimationUsingKeyFrames and IsAdditive set to "False". -->
    <Rectangle Name="withoutIsAdditiveUsingKeyFrames"
      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 IsAdditive set to "True". Because IsAdditive is set to "True" the 
                   actual starting value of the animation is equal to the sum of the default starting 
                   value of 100 (From="100)and the animation output value of 100 (From="100" To="200") Therefore
                   the animation begins at 200 pixels. Notice that each time the button is clicked and the 
                   animation is initiated, the animation starting value builds upon the preceeding ending value. -->
              <DoubleAnimation 
                Storyboard.TargetName="withIsAdditive" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:3" From="100" To="200" IsAdditive="True" />

              <!-- DoubleAnimation with IsAdditive set to "False". The starting value is the default starting
                   value of 100 pixels and subsequent animations do not build on earlier ones. -->
              <DoubleAnimation 
                Storyboard.TargetName="withoutIsAdditive" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:3" From="100" To="200" IsAdditive="False" />

              <!-- DoubleAnimationUsingKeyFrames with IsAdditive set to "True". Similar to the DoubleAnimation
                   above, this animation adds its output value to its starting value. 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="withIsAdditiveUsingKeyFrames"
                 Storyboard.TargetProperty="Width"
                 IsAdditive="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 IsAdditive set to "False". The starting value is the 
                   default starting value of 100 pixels and subsequent animations do not build on earlier ones. -->
              <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName="withoutIsAdditiveUsingKeyFrames"
                 Storyboard.TargetProperty="Width"
                 IsAdditive="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>

참고 항목