In WPF how do I add easing function to my animation from code behind?

Question

I am creating doubleAniation in code and I want to add an easing function to it, so how do I do it?

Conrad · Answer 1 · 2013-06-19T19:49:20.380

It's not necessary to use DoubleAnimationUsingKeyFrames - it can be done with just DoubleAnimation:

CircleEase easing = new CircleEase();  // or whatever easing class you want
easing.EasingMode = EasingMode.EaseInOut;
DoubleAnimation scrollQueue = new DoubleAnimation();
scrollQueue.By = -singleScrollAmt;
scrollQueue.EasingFunction = easing;
scrollQueue.Duration = TimeSpan.FromSeconds(0.5);
MyTextBlock.BeginAnimation(Canvas.TopProperty, scrollQueue);

score 5 · Accepted Answer · answered Nov 28 '10 at 13:38

Here's how I do it:

        DoubleAnimationUsingKeyFrames compassRoseAnimation = new DoubleAnimationUsingKeyFrames();
        compassRoseAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
        QuarticEase easingFunction = new QuarticEase();
        easingFunction.EasingMode = EasingMode.EaseInOut;
        EasingDoubleKeyFrame startAnimation = new EasingDoubleKeyFrame(previousRotationDegrees, KeyTime.FromPercent(0));
        EasingDoubleKeyFrame endAnimation = new EasingDoubleKeyFrame(newRotationDegrees, KeyTime.FromPercent(1.0), easingFunction);
        compassRoseAnimation.KeyFrames.Add(startAnimation);
        compassRoseAnimation.KeyFrames.Add(endAnimation);

        RotateTransform rotateTransform = new RotateTransform();
        CompassWithNumbersControl.RenderTransform = rotateTransform;
        rotateTransform.BeginAnimation(RotateTransform.AngleProperty, compassRoseAnimation);

Um, correct me if I'm wrong, but is there a typo in your code? You define, then set the EasingMode on your QuadraticEase, but it doesn't actually look like you *use* it. Where do you actually apply it to your animation(s)? — Mark A. Donohoe, Aug 02 '18 at 06:15
I am really confused on how the he** I missed that! I think I was looking at it on a smaller screen and that part was clipped off and I didn’t notice. Ignore my comment! :-) — Mark A. Donohoe, Oct 21 '18 at 23:20

score -1 · Answer 3 · answered Sep 21 '10 at 13:15

-1

I have figure out it myself. I was looking for Easing property, but in fact it is called KeySpline and I have to use DoubleAniamtionUsingKeyFrames instead, to get easing functionality.

answered Sep 21 '10 at 13:15

Vitalij

4,587
9
42
65

3

You don't have to use keyframes at all - there were two perfectly valid answers which you failed to give credit to and instead answered your own question with a BAD solution. Very poor community interplay on your part. The original question was also poorly worded, poorly defined/constrained, and did not have any example code demonstrating your issue. – tpartee Jul 28 '14 at 23:21

In WPF how do I add easing function to my animation from code behind?

3 Answers3