<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Programming .NET 3.5 " Background="Black" Margin="50">
<StackPanel>
<Button Content="Slow Spinning Button" Width="100" RenderTransformOrigin="0.5,5">
<Button.RenderTransform>
<RotateTransform x:Name="AnimatedRotatedTransform" Angle="0" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="AnimatedRotatedTransform" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
WPF에서 애니메이션을 사용하려면, 대상 오브젝트는 반드시 필요한 세 가지 조건이 있다
1. 의존 프로퍼티(dependency property)를 가지고 있어야한다
2. DependencyObject 에서 상속받고, IAnimatable 인터페이스를 구현해야한다(Button, Panel, Shape 같은 컨트롤들은 모두 이러한 처리 과정을 거쳤기 때문에 , 애니메이션을 적용하는 데 거의 문제가 없다)
3. 호환 가능한 애니메이션 타입을 이용할 수 있어야 한다(그렇지 않으면 스스로 만들 수 있다)
보통 애니메이션을 시작하는 첫 번째 단계는 애니메이션을 적용한 프로퍼티를 고르는것이다.
각도는 Angle 프로퍼티로 설정하는데. 이프로퍼티의 데이터 타입이 Double 이기때문에 DoubleAnimation을 이용해서 시작과 종료 값(From과 To 프로퍼티로 지정한다) 사이의 트랜지션 애니메이션을 만들 것이다.
이때 , Duration 프로퍼티도 지정해야 한다. 이 프로퍼티는 시작 값에서 종료 값까지 의 걸리는 시잔을 지정한다 Duration 이 길어질수록 애니메이션을 느려진다
두 번째 단계는 DoubleAnimation을 배치한 Storyboard를 만드는 것이다 DoubleAnimation은 Storyboard.Targetname을 이용해서 애니메이션을 적용할 곳을 지정한다. 다시 말하면, 이번 예제의 Button처럼
애니메이션이 적용될 오브젝트를 지정한다
마지막 단계는 Storyboard와 Trigger(애니메이션을 시작할 이벤트 같은)를 연결하는 것이다
의존 프로퍼티 - 기본값(default value), 값 상속(progerty value inheritance), 데이터 바인딩 (data binding), 애니메이션, 프로퍼티 변경통보(property change notification ), 스타일뿐만 아니라 값 표현식(value expreesion), 프로퍼티 무효화(property invalidation), 의존 값 할당 등을 지원한다. 또한, 의존 프로퍼티는 "첨부 프로퍼티(attached property)의 생성을 허용한다. 첨부 프로퍼티는 임의의 클래스에 다른 클래스의 프로퍼티를 추가적으로 덧붙일 수 있다. 예를 들어, Canvas는 Ellipse 같은 컨트롤에 자신의 프로퍼티를 첨부할 수 있다. 이를 XAML로 표현하면 다음과 같다.
<Canvas Width="180" Height="180" VerticalAlignement="Center">
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="160" Height="160" Fill="LimeGreen" Strocke="Black" />
Ellipse 엘리먼트는 Left 혹은 Top 프로퍼티가 없지만, 예제로 사용한 코드에서는 Canvas의 Left와 Top프로퍼티를 빌려와 사용하고 있다,
동시 실행 애니메이션
이전 예제의 Storyboard는 애니메이션이 하나뿐이었기 때문에 DoubleAnimation의 실행을 제한하거나 정확히 한 바퀴 돈 후 멈추는 과정이 필요치 않았다. 그러나, 대각선으로 움직이도록 하기 위해서 수직과 수평 방향의 움직임을 결합해야 할 수도 있고, 무한정 반복되도록 할 수 있다.
한 쌍의 DoubleAnimation을 이용한 대각선 움직임
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Simple LGM Animation" Background="White" Margin="50">
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard Name="LGMMoverStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LGMCanvas" Storyboard.TargetProperty="Height" From="10" To="600" Duration="0:0:1" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="LGMCanvas" Storyboard.TargetProperty="Width" From="10" To="600" Duration="0:0:1" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas Width="180" Height="180" VerticalAlignment="Center" x:Name="LGMCanvas">
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="160" Height="160" Fill="LimeGreen" Stroke="Black" />
<Ellipse Canvas.Left="45" Canvas.Top="50" Width="25" Height="25" Fill="Black" Stroke="Black" />
<Ellipse Canvas.Left="110" Canvas.Top="50" Width="25" Height="25" Fill="Black" Stroke="Black" />
<Path Data="M 50,100 A30,30 900 0 0 130, 100" Stroke="Red"/>
</Canvas>
</Window>
- 참고 Programming .Net 3.5 by Jesse Liberty and Alex Horovitz.
