0

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.

Nerdy Bunz
  • 6,040
  • 10
  • 41
  • 100

1 Answers1

2

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.

WSBT
  • 33,033
  • 18
  • 128
  • 133
  • Thanks! At the risk of confusing matters (no need to respond to it here), the use case is loosely related to my current question on math.stackexchange just fyi. – Nerdy Bunz Apr 08 '22 at 20:01
  • @NerdyBunz I read your question on `math` site, looks like you have 2 approaches, let me just call them "modeling" and "simulation". For "modeling" approach, you will model the situation as a function of many variables, like you mentioned in your question there, so you are able to calculate exactly what an animation frame would look like at any given time, very efficient. For that, you'd probably be using `CustomPaint` in Flutter, and calculating each pixel, so you wouldn't really be doing any of the animation controller chaining stuff. (1/2) – WSBT Apr 08 '22 at 20:53
  • (continued) And for the "simulation" approach, you could use a bunch of widgets to simulate a bunch of light bulbs, so each light bulb would maintain its own internal state, gradually dimming and etc. You could also use CustomPaint for simulation, but unlike `canvas` in `html`, Flutter canvas does not retain previous content, so it'll be a little bit harder to use than html canvas (in JS you could just repeatedly draw a semi-transparent rectangle to gradually dim all light bulbs every frame, since contents from the previous frame are retained for html canvas). (2/2) – WSBT Apr 08 '22 at 20:55