WPF smooth animations

Question

I'm trying to animate a grid's width using DoubleAnimationUsingKeyFrames. I already know how to make a simple linear animation, but what I'm trying to achieve is a smooth movement that speeds up when it starts than slows down at the end. Right now I'm using LinearDoubleKeyFrame, but I've tried all the other types of DoubleKeyFrames, and none seemed to give me the effect I want. I made a graph that should give you a better idea of what I'm trying to get.

Use one of the [`Easing Functions`](https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/easing-functions). [`EaseInOut`](https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/media/cubicease-graph.png) looks the closest to your graph. — Bradley Uffner, Aug 02 '17 at 15:10
Thanks for the quick responses, I'll try those functions later today :) — Lázár Zsolt, Aug 02 '17 at 15:17

score 1 · Accepted Answer · answered Aug 05 '17 at 10:24

1

Bradley Uffner:

Use one of the Easing Functions. EaseInOut looks the closest to your graph.

answered Aug 05 '17 at 10:24

Lázár Zsolt

685
8
29

`AccelerationRatio` and `DecelerationRatio` can be ajusted for a perfect match – Xaalek Jun 29 '22 at 15:18

score 1 · Answer 2 · edited Aug 05 '17 at 20:50

An example:

<Trigger.EnterActions>
   <BeginStoryboard>
       <Storyboard>
          <DoubleAnimation To="100" Duration="0:0:0.2" Storyboard.TargetName="e" Storyboard.TargetProperty="Width">
            <DoubleAnimation.EasingFunction>
              <EaseInOut ></EaseInOut >
            </DoubleAnimation.EasingFunction>
          </DoubleAnimation>
       </Storyboard>
   </BeginStoryboard>
</Trigger.EnterActions>

WPF smooth animations

2 Answers2