Home > front end >  Flutter Animation Controller Velocity Does Not Reflect Curve Applied
Flutter Animation Controller Velocity Does Not Reflect Curve Applied

Time:04-14

Preface: This is not a debugging question -- there is no code problem -- code is for illustration purposes only.

I am working with an animation controller in Flutter.

Using controller.forward with the controller alone (no curve applied), the controller.velocity property is constant during the animation... and this is to be expected.

So I thought to myself, "Ah... I'll apply a curve to the animation controller... then the velocity property will correspond directly to the curve applied!"

I added this code:

// 'ac' is the Animation Controller

myCurve = CurvedAnimation(parent: ac, curve: Curves.easeInOutCirc);

myTween = new Tween(
  begin: 0.0,
  end: 1.0,
).animate(myCurve);

I expected that either:

A) The controller.value property would just automatically yield the newly calculated velocity.

B) I would be able to use myCurve.velocity or myTween.velocity instead, which would yield the new, calculated velocity.

I have verified visually that the curve is being applied properly to the animation, but I can also see (visually) and with print debugging that controller.velocity yields the same velocity (constant) as it did with no curve applied, and neither myCurve or myTween have a velocity property!

Surely there is a way to access a velocity property somewhere that correlates to the applied curve.

I've tried googling but it's one of those topics that is very hard to avoid more general results.

CodePudding user response:

The "velocity" is a property of AnimationController, not a property of the Animation class or Tween class. If you want to get the rate of change of a known function, you can take the derivative of that function.

So I thought to myself, "Ah... I'll apply a curve to the animation controller... then the velocity property will correspond directly to the curve applied!"

Nope, you are not "applying a curve to the animation controller". You are creating an instance of an Animation<double> type, "driven" by the controller. You made a new object. The original "animation controller" is not mutated in any way.

Think of it like this: Say we have a function f(t) = t, that's your "animation controller". When t (time) is halfway (say we are at 0.5 seconds, if the total duration is 1 second), "animation controller's value" would be f(0.5) = 0.5, which is correct, assuming a default range of 0.0 to 1.0. The "velocity" of the animation controller is 1 when it's animating, and 0 when it's stopped.

Now say you want to double the value output, you "chain" another function g(x) = 2x to your controller f(t), so you would have g(f(t)) = 2(t) = 2t in the end. The rate of change of g(x) is 2, but the rate of change of the original f(t) is still 1. The animation controller remains unchanged, it's just being used to "feed" another function. And the chained "end result" (g(f(t))), is an Animation<double> type, with no "velocity" method available.

To calculate velocity, you could use Tween.transform to evaluate any input, and estimate the rate of change by sampling multiple points across a domain of interest. Another approach is to take the derivative of the curve function to get the exact rate of change. Having said that, I couldn't think of a use case for wanting to know the velocity. If you could share more about why you want to know the velocity of the chained animation, maybe we could then suggest some other approaches to achieve it.

  • Related