[21기 김종현] WPF PointAnimation

[21기 김종현]

PointAnimation Class	작성자 : 김종현
	작성일 : 2011-04-14
주 제 : 새로운 Class 학습

※ 이 문서는 .NET Framework 3.5 version 기반으로 설명되었습니다.

※ 네임스페이스 : System.Windows.Media.Animation

※ XAML의 XMLNS : http://schemas.microsoft.com/winfx/xaml/presentation

◎ PointAnimation

- 지정된 Duration 동안 선형 보간을 사용하여 두 대상 값 사이에서 Point 속성 값에  애니메이션을 적용합니다.

- 여기서 Duration은 반복을 제외하고 해당하는 Timeline이 재생되는 시간을 가져오거나 설정합니다. 이 속성은 종속성 속성입니다.

- 애니메이션을 적용하면 일정 기간 동안 속성의 값이 업데이트됩니다. 애니메이션의 효과는 Shape를 몇 픽셀 왼쪽에서 오른쪽으로 이동하는 것처럼 미세한 것일 수도 있고 개체를 원래 크기의 200배로 확대하여 회전하거나 색을 변경하는 것처럼 확연한 것일 수도 있습니다. WPF(Windows Presentation Foundation)에서 애니메이션을 만들려면 애니메이션을 개체의 속성 값에 연결해야 합니다.

◎ PointAnimation 대상 값

- PointAnimation 클래스는 두 대상 값 간에 전환을 생성합니다. 대상 값을 설정하려면 해당 From, To 및 By 속성을 사용합니다.

- To와 By속성을 모두 설정하면 To 속성이 우선하며 By 속성은 무시됩니다.

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

◎ PointAnimation 멤버 (멤버 보기 Click!)

- PointAnimation의 멤버들에 대한 설명은 MSDN 링크로 대신하겠습니다. 그러면 PointAnimation을 사용하는 예제에 보여드리겠습니다.

1. 새 프로젝트에서 WPF 응용 프로그램을 선택한 후에 확인 버튼을 눌러서 프로젝트를 하나 생성해 줍니다. 

2. 그러면 Window1.xaml과 App.xaml 라고 만들어 지는 것을 확인 할 수 있습니다.

3. 그럼 이제 XAML 코드를 이용해서 PointAnimation을 사용하는 방법을 보여드리겠습니다.

<Window x:Class="AnimationPath.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>       

    </Grid>

</Window>

WPF 응용 프로그램을 만들면 기본적으로 생성되는 XAML 코드입니다.

<Path Stroke="Red" StrokeThickness="3"> </Path>

<Grid>와 </Grid> 사이에 넣어주는 속성으로 선과 곡선을 그리는데 사용하는 Path와 정보를 담을 수 있는 Stroke를 이용하여 색깔과 굵기를 설정할 수 있습니다.

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="30,80">

<LineSegment Point="50,80"/>

<QuadraticBezierSegment x:Name="qbs1" Point1="70,20" Point2="90,80"/>

<QuadraticBezierSegment x:Name="qbs2" Point1="110,140" Point2="130,80"/>

<LineSegment Point="150,80"/>      

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

원호, 곡선, 타원, 선, 사각형 등으로 구성된 복잡한 도형을 나타낼 때 사용하는 PathGeometry를 이용하고 경로의 내용을 설명하는 PathFigure 개체 컬렉션을 사용하여 초기 형태를 설정해 줍니다. LineSegment는 두 점 사이의 선을 만드는데 사용 되고 QuadraticBezierSegment는 PathFigure에 있는 두 점 사이에 정방형 3차원 곡선을 만드는데 사용합니다.

<Button Content="Start" Margin="0,150,0,0"  Click="Button_Click"></Button>

Animation 시작의 명령을 내리기 위해서 버튼을 하나 만들고 이벤트 처리기를 하나 생성합니다.

private void Button_Click(object sender, RoutedEventArgs e)

{

    Storyboard sb = this.FindResource("pointanimation") as Storyboard;

    sb.Begin(this);

}

버튼의 이벤트 처리를 위해서 코드를 삽입해 줍니다. Storyboard의 key 값을 pointanimation으로 줬기 때문에 그 Resource를 찾아 오게 해줍니다. 잘못 명시할 경우에 프로그램이 터질 수 있으니 오타에 주의 하기 바랍니다. pointanimation으로 정하는 부분에 대해서는 밑에 설명하도록 하겠습니다.

<Window.Resources>

<Storyboard x:Key="pointanimation">

<PointAnimation From="70,20" To="70,140"  RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs1" Storyboard.TargetProperty="Point1"/>

<PointAnimation From="110,140" To="110,20" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs2" Storyboard.TargetProperty="Point1"/>

</Storyboard>

</Window.Resources>

Resource를 사용할 시에는 Key 값을 명시해 줘야 하기 때문에 Key 값을 임의로 정해줍니다. 그 다음에 PointAnimation 명령에 대해서 설정을 할 수 있습니다. From To 는 위의 설명대로 원하는 값을 설정해 주면 됩니다. 계속 해서 반복 할 건지에 대해서도 정할 수 있고, 자동으로 반대로 돌아 갈 수 있는 기능도 불 수 있습니다.  Storyboard의 초기 값을 정해 주기 위해서 TargetName과 TargetProperty를 정해 주도록 합니다.

4. 위와 같은 과정을 거쳐서 XAML 코드를 입력해 주면, 지정해 준 좌표에서 선이 움직이는 것을 눈으로 확인 할 수 있습니다.

예제 결과 : AnimatingPath.exe

XAML예제코드 : 예제 코드 보기

[21기 김동영]

오.. 신기하네요