wpf scale animation 사용하기

저번에 wpf에서 animation을 사용하는 법에 대해 썼다. 그런데 그러한 방법으로는 scale값이 변하지 않았다. 찾아보니 scale같이 RenderTransform안에 있는 값을 애니메이션을 사용하려면 다른 방법이 필요하다.

BeginAnimation(ScaleTransform.ScaleXProperty, da); 를 사용해도 변하지 않았다.

우선 animation을 참조해야 한다.

using System.Windows.Media.Animation;

animation을 적용시킬 때 여러 애니메이션을 동시에 적용시킬 수 있게 해주는 클래스가 있다.

Storyboard라는 클래스인데, 이 클래스 변수에 Children으로 Animation변수를 넣으면 해당 애니메이션들을 동시에 실행할 수 있다. 그리고 scale을 애니메이션 적용시킬 때 이 Storyboard가 필요하다.

기본 생성자 : new Storyboard();

Storyboard는 SetTarget과 SetTargetProperty 함수를 사용할 수 있는데 이는 BeginAnimation에서 첫번째 인자와 같은 역할을 한다. 애니메이션을 적용시킬 Target을 정하는 것이다. 이 TargetProperty를 이용해 scale값을 변화시킬 수 있다.

이 함수는 Storyboard 클래스를 통하여 호출해야 한다. 간단한 예제를 먼저 보자. img는 Image 컨트롤이다.

먼저 설정할 것이 있는데

ScaleTransform scale1 = new ScaleTransform(1, 1);

img.RenderTransformOrigin = new Point(0.5, 0.5);

img.RenderTransform = scale1;

이 내용을 Scale을 애니메이션 하기 전에 호출해야 한다. 아니면 xaml파일에서 직접 선언해주어도 된다.

image의 경우

<Image x:Name="img" RenderTransformOrigin="0.5,0.5">

            <Image.RenderTransform>

                <TransformGroup>

                    <ScaleTransform ScaleX="1" ScaleY="1"/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Image.RenderTransform>

        </Image>

위와 같이 되어야 하는데, 그냥 속성창에서 scale값을 변화시키면 자동으로 추가된다.

1. DoubleAnimation da = new DoubleAnimation();
2. da1.To = ratio;
3. da1.Duration = duration;
4. 
   
5. Storyboard stb = new Storyboard();
6. 
   
7. stb.Children.Add(da);
8. Storyboard.SetTarget(da, img);
9. Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.ScaleX"));

7번 줄에서 Storyboard 형 변수의 Children으로 DoubleAnimation 형 변수를 추가한다.

8번 줄에서 da가 img 라는 컨트롤을 변화시키게 한다.

9번 줄에서 Storyboard 클래스의 SetTargetProperty를 호출하여 da가 RenderTransform.ScaleX 를 변화시키게 한다.

위와같이 설정한 후

stb.Begin()을 호출하면 img의 scaleX가 변화하는 것을 볼 수 있다.

그런데 보통 ScaleX는 ScaleY와 같이 변화한다. 그래서 두 값을 동시에 변화시키는 애니메이션을 예제로 보자.

ScaleTransform scale = new ScaleTransform(1, 1);

img.RenderTransformOrigin = new Point(0.5, 0.5);

img.RenderTransform = scale;

Duration duration = new Duration(TimeSpan.FromMilliseconds(500));

DoubleAnimation da1 = new DoubleAnimation();

DoubleAnimation da2 = new DoubleAnimation();

da1.From = 1;

da1.To = 5;

da1.Duration = duration;

 

da2.From = 1;

da2.To = 5;

da2.Duration = duration;

Storyboard stb = new Storyboard();

stb.Children.Add(da1);

Storyboard.SetTarget(da1, img);

Storyboard.SetTargetProperty(da1, new PropertyPath("RenderTransform.ScaleX"));

stb.Children.Add(da2);

Storyboard.SetTarget(da2, img);

Storyboard.SetTargetProperty(da2, new PropertyPath("RenderTransform.ScaleY"));

stb.Begin();