방법: FrameworkElement의 크기에 애니메이션 효과 적용

FrameworkElement의 크기에 애니메이션 효과를 적용하려면 해당 Width 및 Height 속성에 애니메이션 효과를 적용하거나 애니메이션이 적용된 ScaleTransform을 사용합니다.

다음 예제에서는 이와 같은 두 가지 방법을 사용하여 두 단추의 크기에 애니메이션 효과를 적용합니다. 첫 번째 단추는 해당 Width 속성에 애니메이션 효과를 적용하여 단추 크기를 조정하고, 두 번째 단추는 해당 RenderTransform 속성에 적용된 ScaleTransform에 애니메이션 효과를 적용하여 단추 크기를 조정합니다. 각 단추에는 텍스트가 포함되어 있습니다. 처음에는 두 단추의 텍스트가 똑같이 나타나지만 단추 크기를 조정한 후에는 두 번째 단추의 텍스트가 왜곡되어 나타납니다.

예제

<!-- AnimatingSizeExample.xaml
     This example shows two ways of animating the size
     of a framework element. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.AnimatingSizeExample" 
  WindowTitle="Animating Size Example">    
  <Canvas Width="650" Height="400">

    <Button Name="AnimatedWidthButton"
      Canvas.Left="20" Canvas.Top="20"      
      Width="200" Height="150"
      BorderBrush="Red" BorderThickness="5">
        Click Me
      <Button.Triggers>

        <!-- Animate the button's Width property. -->
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="AnimatedWidthButton"
                Storyboard.TargetProperty="(Button.Width)"
                To="500" Duration="0:0:10" AutoReverse="True" 
                RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <Button 
      Canvas.Left="20" Canvas.Top="200"
      Width="200" Height="150"
      BorderBrush="Black" BorderThickness="3"> 
        Click Me
      <Button.RenderTransform>
         <ScaleTransform x:Name="MyAnimatedScaleTransform" 
          ScaleX="1" ScaleY="1"  />
      </Button.RenderTransform>
      <Button.Triggers>

        <!-- Animate the ScaleX property of a ScaleTransform
             applied to the button. -->
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                To="3.0" Duration="0:0:10" AutoReverse="True"
                RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>      
    </Button>
  </Canvas> 
</Page>

요소를 변환하면 요소와 요소의 내용이 모두 변환됩니다. 첫 번째 단추와 같이 요소 크기를 직접 변경하는 경우 요소 내용의 크기 및 위치가 부모 요소의 크기에 종속되는 경우가 아니면 요소 내용은 크기가 조정되지 않습니다.

애니메이션이 적용된 변환을 요소의 RenderTransform 속성에 적용하여 요소 크기에 애니메이션 효과를 적용하는 경우 RenderTransform 속성이 레이아웃 과정을 트리거하지 않으므로 요소의 Width 및 Height에 직접 애니메이션 효과를 적용할 때보다 성능이 향상됩니다.

속성에 애니메이션 효과를 적용하는 방법에 대한 자세한 내용은 애니메이션 개요를 참조하십시오. 변환에 대한 자세한 내용은 Transform 개요를 참조하십시오.