방법: 현재 위치에서 요소가 회전하도록 만들기

이 예제에서는 RotateTransform 및 DoubleAnimation을 사용하여 요소를 회전하는 방법을 보여 줍니다.

다음 예제에서는 요소의 RenderTransform 속성에 RotateTransform을 적용합니다. 이 예제에서는 DoubleAnimation을 사용하여 RotateTransform의 Angle에 애니메이션 효과를 줍니다. 요소가 제자리에 회전하도록 하기 위해 예제에서 요소의 RenderTransformOrigin 속성을 지점 (0.5, 0.5)로 설정합니다.

예제

<!-- RotateAboutCenterExample.xaml
     This example shows how to make an element spin
     about its center. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.RotateAboutCenterExample" 
  WindowTitle="Rotate About Center Example">    
  <StackPanel Margin="50">
    
    <Button
      RenderTransformOrigin="0.5,0.5"
      HorizontalAlignment="Left">
        Hello,World
      <Button.RenderTransform>
        <RotateTransform x:Name="MyAnimatedTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedTransform"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="0.0" To="360" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button> 
  </StackPanel> 
</Page>

더 많은 변환 예제를 포함하는 전체 샘플은 2D 변환 샘플을 참조하세요.

참고 항목

• 애니메이션 개요
• Transform 개요