Reverse animations use the "wrong" curve

[goderbauer]

When you run aCurvedAnimation(parent: foo, curve: Curves.fastInSlowOut) in the forward direction (from 0.0 to 1.0), the animation value will move towards the target value quickly and then slow down as it gets close to the target. When you run this animation in reverse (from 1.0 to 0.0) it does the opposite: at the beginning, the animation value will move slowly towards the (new) target value and then speed up. It is literally the reversed animation of the forward case.

In the case of most Material animations/transitions that's usually not what you want. You want the reverse direction to also quickly move towards the target value at the beginning and then slow down as you get closer to the target value.

As an example take a button that fades in and out: When the button fades in it should start to fade in quickly and then slow down as it approaches the target. When it fades out, it should start fading out quickly and then slow down before it completely disappears. It's usually convenient to drive this animation with the same AnimationController going from 0.0 to 1.0 for the fade in and from 1.0 to 0.0 for the fade out. To run both of these animations with the same fastInSlowOut curve, it gets awkward though. Because of the fact stated above, you'd have to specify a separate reverseCurve curve for your CurvedAnimation. In order to do that, you'd have to first figure out what the "inverse" curve of Curves.fastInSlowOut is. Curves.fastInSlowOut is defined as Cubic(0.4, 0.0, 0.2, 1.0). So the inverse of that would be Cubic(0.8, 0.0, 0.6, 1.0), which is a curve that we don't even include with the Flutter framework as a predefined curve.

In order to get the right affect, you'd now have to specify a

CurvedAnimation(
  parent: foo,
  curve: Curves.fastInSlowOut,
  reverseCurve: Cubic(0.8, 0.0, 0.6, 1.0),
)

Anecdotally, most people (including me) are/were not aware of that, which probably means that many Material animations implemented in the wild use the wrong easing in the reverse direction. It would be cool if there was an easier way for people to do the right think out-of-the-box.

[rostopira]

Actually, you can use .flipped property

CurvedAnimation(
  parent: foo,
  curve: Curves.fastInSlowOut,
  reverseCurve: Curves.fastInSlowOut.flipped,
)

[rostopira]

Also, this behavior is documented and expected

  /// If this field is null, uses [curve] in both directions.
  Curve reverseCurve;

[rostopira]

I can easily provide a PR, to use .flipped if reverseCurve is null

[goderbauer]

Ah, I forgot about the flipped property. That makes this a little simpler.

[kf6gpe]

Closing as it looks like this is correct behavior between documentation and flipped.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.