C#/WPF

wpf animation 사용하기

기공이 2016. 11. 9. 23:06

이번엔 wpf에서 제공하는 애니메이션 기능입니다.


wpf에서는 모든 컨트롤들의 애니메이션을 지원합니다. 애니메이션은 컨트롤이 움직이고, 크기가 변하고, 회전하는 움직임을 애니메이션처럼 표현해 줍니다.


먼저 참조가 필요합니다.


using System.Windows.Media.Animation;


가장 많이쓰는 클래스는 DoubleAnimation 인데요, 이는 double값을 이용하여 애니메이션을 해주기 때문에 이름이 DoubleAnimation 입니다. 이 외에도 byte, char, int32, int64, matrix 등등 여러 값을 이용하여 애니메이션을 표현할 수 있게 해줍니다. 


기본적인 생성자입니다.

DoubleAnimation da = new DoubleAnimation();


애니메이션의 원리는 from값 부터 to 값까지 duration의 시간동안 변하는 것입니다. 그리고 to까지 갔다가 from으로 돌아올 것인지(AutoReverse), 반복해서 할 행동(RepeatBehavior) 등을 설정할 수 있습니다. to와 duration값을 제외하고는 설정하지 않아도 할 수 있습니다. 


From : 시작할 값을 입력합니다. DoubleAnimation이기 때문에 double값을 입력해야 합니다[각주:1]

da.From = 0.0;


To : 도착할 값을 입력합니다. From과 같이 double값을 입력해야 합니다.

da.To = 5.0;


Duration : 기간을 설정합니다. duration 타입의 변수를 대입해야 합니다.

da.Duration = new Duration(new TimeSpan(0, 0, 1)); // 1초


BeginAnimation(...) : 애니메이션을 시작합니다. 이 함수는 DoubleAnimation 변수가 아니라 애니메이션을 적용시키려는 컨트롤에서 호출해야 합니다. 

xaml에서     <Button x:Name="btn">Button</Button>    와 같은 버튼이 있을 때 코드에서는


btn.BeginAnimation(Button.HeightProperty, da);


로 호출 했을때, 버튼의 Height가 from에서 to로 변화합니다.


BeginAnimation(...)의 첫번째 인수는 애니메이션을 적용시킬 곳의 Property입니다. 

버튼의 높이를 변화시키실 것이라면 Button의 HeightProperty를, 

폭을 변화시키실 것이라면 WidthProperty를 넣으시면 됩니다.


사용하는 예제를 보여드리겠습니다.


xaml

<Button x:Name="btn" Height="50" Width="100" Click="btn_Click">Button</Button> 


cs

void btn_Click(object sender, RoutedEventArgs e)

{

DoubleAnimation da = new DoubleAnimation();

da.From = 50;

da.To = 70;

da.Duration = new Duration(TimeSpan.FromMilliseconds(500)); // 500ms == 0.5s

da.AutoReverse = true;

da.RepeatBehavior = RepeatBehavior.Forever;


btn.BeginAnimation(Button.HeightProperty, da);

}


기본적인 애니메이션 사용 방법입니다.


  1. ByteAnimation일 경우 Byte형을 입력해야 합니다. [본문으로]