본문 바로가기

C#

[Surface - WPF] Surface 에서의 에니메이션 활용 (ArtefactAnimator)

 

출처 : http://artefactanimator.codeplex.com/

 

기존 WPF 의 애니메이션 중 스토리 보드(Storyboard) 라는 극악의 사용성을 가진 방법이 존재 한다.

AS3 의 트윈라이트 (TweenLite , TweenMax) 처럼 산뜻하지 않고 왠만한 복합에니메이션을 구현하려면 한바닥이 꽉 찬다.

이건 , 머 차라리 자체적으로 트윈 클래스를 만들라는 숨은 의도 같다.

그러던 도중 artefactanimator 라는 것을 발견했고 이것이 AS3 의 TweenLite 를 본따서 만들었다고 한다.

사용법이 간단하다.

그러나 보통의 UIElement 에서는 잘 동작 하나 , Surface2.0 용 컨트롤 에서는 당췌 동작하지 않는다.

이유를 살펴 보니 각 속성이 getter setter 로 잘 지켜져야 한다. 마땅하다. 그러나 AS3 의 비주얼 객체들과 달리 WPF 의 객체들의 비주얼 속성 을 살펴 보면 간단히 getter setter 로 잘 되어 있지 않은것이 많다.

대표적인것이 ScatterViewItem 의 위치 를 설정할때 item.Center = new point(*.*) 식으로 설정 해야 한다.

이러한 형태로 트위닝은 보통 방법으로는 어렵다.

AS3 의 TweenMax 류 에서는 별도의 var obj = {prop : 100} 로 설정한다음 obj 에 Tween을 걸었다. 이와 비슷한 방법으로 artefactanimator 를 활용하는 방법을 알아본다.

 

 
//트위너 설정
            var customTween = new GetterSetter
            {
                Getter = (obj, data) => obj,
                Setter = (obj, data, per) =>
                {
                    //변위
                    var c = EaseHelper.EaseValue((Point)data.ValueStart, (Point)data.ValueEnd, per);

                    //트위닝 타겟
                    item.Center = c;
                }
            };

            //초기객체 설정
            Point movePoint = new Point(0, 0);

            //Prop 레지스터 등록 , 같은 이름으로 등록을 시도하면 등록이 안된다. 따라서 밑에 것은 무시되어 걱정할필요 없다.
            var b1 = AnimationTypes.RegisterGetterSetter(movePoint.GetType().ToString(), customTween);
            var b2 = AnimationTypes.RegisterGetterSetter(movePoint.GetType().ToString(), customTween);
            Console.WriteLine("b1 " + b1);
            Console.WriteLine("b2 " + b2);

            //실제 트위닝 명령
            ArtefactAnimator.AddEase(movePoint, movePoint.GetType().ToString(), new Point(323, 211), 3, AnimationTransitions.CubicEaseIn);

            //5초 후에 다시 트위닝
            movePoint.X = 323;
            movePoint.Y = 211;
            ArtefactAnimator.AddEase(movePoint, movePoint.GetType().ToString(), new Point(323, 0), 3, AnimationTransitions.CubicEaseIn, 5);