방법: From, To 및 By를 사용하여 애니메이션 제어

업데이트: 2007년 11월

"From/To/By" 또는 "기본 애니메이션"은 두 대상 값 사이의 전환을 만듭니다. 다른 종류의 애니메이션에 대한 소개는 애니메이션 개요를 참조하십시오. 기본 애니메이션의 대상 값을 설정하려면 애니메이션의 From, To 및 By 속성을 사용합니다. 다음 표에서는 From, To 및 By 속성을 함께 또는 개별적으로 사용하여 애니메이션의 대상 값을 확인하는 방법을 간략하게 설명합니다.

지정된 속성	결과 동작
From	애니메이션은 이전 애니메이션의 구성 방식에 따라 From 속성이 지정하는 값에서 애니메이션을 적용하는 속성의 기준 값 또는 이전 애니메이션의 출력 값까지 진행됩니다.
From 및 To	애니메이션은 From 속성이 지정하는 값에서 To 속성이 지정하는 값까지 진행됩니다.
From 및 By	애니메이션은 From 속성이 지정하는 값에서 From 및 By 속성의 합이 지정하는 값까지 진행됩니다.
To	애니메이션은 애니메이션이 적용되는 속성의 기준 값이나 이전 애니메이션의 출력 값에서 To 속성이 지정하는 값까지 진행됩니다.
By	애니메이션은 애니메이션을 적용하는 속성의 기준 값이나 이전 애니메이션의 출력 값에서 해당 값과 By 속성이 지정하는 값의 합까지 진행됩니다.

참고

한 애니메이션에서 To 속성과 By 속성을 동시에 설정하지 마십시오.

다른 보간 메서드를 사용하거나 둘 이상의 대상 값 사이에 애니메이션을 적용하려면 키 프레임 애니메이션을 사용합니다. 자세한 내용은 키 프레임 애니메이션 개요를 참조하십시오.

단일 속성에 여러 애니메이션을 적용하는 방법에 대한 자세한 내용은 키 프레임 애니메이션 개요를 참조하십시오.

다음 예제에서는 애니메이션에 To, By 및 From 속성을 설정할 때의 다양한 효과를 보여 줍니다.

예제

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- Demonstrates the From and To properties used together.
                 Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromToAnimatedRectangle" 
                Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- Demonstrates the To property used by itself.
                 Animates the Rectangle's Width property from its base value
                 (100) to 300 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="toAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- Demonstrates the By property used by itself.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from its base value
                 (100) to 400 (100 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="byAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- Demonstrates the From and By properties used together.
                 Increments the Rectangle's Width property by 300 over 10 seconds.
                 As a result, the Width property is animated from 50
                 to 350 (50 + 300) over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- Demonstrates the From property used by itself.
                 Animates the rectangle's Width property from 50 to its base value (100)
                 over 10 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="fromAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

참고 항목

작업

From, To 및 By 애니메이션 대상 값 샘플

개념

애니메이션 개요

키 프레임 애니메이션 개요