[WPF/Silverlight] 애니메이션에 가속/감속 넣기

가속 감속 넣기는 참 쉽습니다.
문제는 애니메이션을 구성할때 어떻게 구성했냐에 따라 다르죠.

이전글 - [WPF/Silverlight] 오브젝트 애니메이션

이전글을과 같이 'DoubleAnimationUsingKeyFrames'로 구현한경우 키프레임 구성에 사용한 'EasingDoubleKeyFrame'을 사용하여 가속/감속을 지정하여야 합니다.

가속/감속을 지정할때 사용하는 속성은 'EasingFunction'입니다.
이게 있어야 지정이 가능하죠.

//DoubleAnimationUsingKeyFrames
kf = new EasingDoubleKeyFrame();
kf.EasingFunction = new CircleEase() { EasingMode = System.Windows.Media.Animation.EasingMode.EaseInOut };

//DoubleAnimation
DoubleAnimation daTarget = new DoubleAnimation();
daTarget.EasingFunction = new CircleEase() { EasingMode = System.Windows.Media.Animation.EasingMode.EaseOut };

위와 같이 사용 합니다.

이전글에 넣게 되면 아래와 같이 넣습니다.

/// <summary>
/// 에니메이션을 세팅한다.
/// </summary>
private void SetAni(object objObj, double dData)
{
    FrameworkElement feObj = (FrameworkElement)objObj;

    EasingDoubleKeyFrame kf = null;
    DoubleAnimationUsingKeyFrames daX = null;
    DoubleAnimationUsingKeyFrames daY = null;

    daX = new DoubleAnimationUsingKeyFrames();
    daY = new DoubleAnimationUsingKeyFrames();

    Storyboard.SetTarget(daX, feObj);
    Storyboard.SetTargetProperty(daX, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
    m_sbReturn.Children.Add(daX);
    Storyboard.SetTarget(daY, feObj);
    Storyboard.SetTargetProperty(daY, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));
    m_sbReturn.Children.Add(daY);

    kf = new EasingDoubleKeyFrame();
	//가속/감속
	kf.EasingFunction = new CircleEase() { EasingMode = System.Windows.Media.Animation.EasingMode.EaseInOut };
    kf.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5));
    kf.Value = 300;
    daX.BeginTime = TimeSpan.FromSeconds(dData);
    daX.KeyFrames.Add(kf);
    kf = new EasingDoubleKeyFrame();
	//가속/감속
	kf.EasingFunction = new CircleEase() { EasingMode = System.Windows.Media.Animation.EasingMode.EaseInOut };
    kf.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5));
    kf.Value = 300;
    daY.BeginTime = TimeSpan.FromSeconds(dData);
    daY.KeyFrames.Add(kf);

    this.m_sbReturn.Completed += new EventHandler(m_sbReturn_Completed);
}

'EasingMode'에는 3가지 속성이 있습니다.

EaseOut : 천천이 멈춤
EaseInOut : 점점빨라지다가 천천이 멈춤
EaseIn : 점점 빨라짐


EaseOut

EaseInOut

EaseIn

초간단 천체 소스

ObjAni.zip