How to use Flutter Animations API

In Flutter’s Ticker API, we achieved the first step of getting the latest value of elapsed time whenever it changes, through Flutter’s Ticker API.

Curves

Flutter offers a Curve abstract class which comes with transform(double t) which is the curve function representing the curve class. The transform method is used to get different values of the curve at different provided values of t.

Flutter sets some restrictions on the transform method to

• the domain of accepted values for parameter t is 0.0 to 1.0 inclusive
• the return value of the method will always lie within a range of 0.0 to 1.0 inclusive
• return 0.0 when t passed to it is 0.0
• return 1.0 when t passed to it is 1.0

Through these restrictions, flutter is trying to communicate that the curves which are being represented through the subclasses of Curve will always have mappings of t from 0.0 to 1.0 to return values within the range of 0.0 to 1.0. If you consider the below empty graph, the rectangular region is where the graph of any transform function would lie.

There are many in-built curves supported by flutter out of the box, making it easy to use some of the most commonly used curves like Curves.bounceIn, Curves.bounceOut, Curves.easeIn, and many more.

To have a look at the complete list of curves supported by Flutter, you can visit Curves classes by Flutter.

Using Curves with Ticker

After getting some idea about what Flutter has to offer regarding curve functions, we can finally talk about the last step which we need to achieve the animation using Flutter.

By the end of the previous part of Flutter’s Ticker API, we discussed the ticker callback provided by Flutter’s Ticker API which gets called with a fresh new instance of elapsed time, after every new frame is being rendered by the underlying rendering engine of flutter.

_ticker = this.createTicker(
  (Duration elapsed) {
		// Here we would want to reach out to our desired curve function
    // and obtained the value of the curve after `elapsed` amount of time has been elapsed
  },
);        

But we found from the above Curves section that every curve function offered by Flutter has some restrictions regarding the domain and range of the function, which will have to obey to make use of curve functions.

Here, when Curve.transform(t) method restricts the allowed values of t from 0.0 to 1.0, it wants to convey that it expects the percentage of time elapsed, instead of the actual time elapsed in duration.

Thus, here we would want to convert the elapsed time obtained from the ticker’s callback into the percentage of time elapsed concerning the total desired duration of the animation.

Thus, if we want the duration of an animation to be of around Duration(seconds: 5), and for instance, the ticker’s callback is invoked with an elapsed time of around Duration(seconds: 2), the Curves.transform(t) method expects the percentage of time elapsed which would be elapsedDurationInSeconds / totalDurationInSeconds

final totalAnimationDuration = Duration(seconds: 5);
_ticker = this.createTicker(
  (Duration elapsed) {
		final totalDurationInSeconds =
        totalAnimationDuration.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;
    final elapsedDurationInSeconds =
        elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;

    double percentageOfTimeElapsed = elapsedDurationInSeconds / totalDurationInSeconds;

    if (percentageOfTimeElapsed >= 1) {
			// Indicates that animation has completed
      _ticker.stop();
    }

		// Ensuring to meet restrictions by Curves.transform(t)
		percentageOfTimeElapsed = percentageOfTimeElapsed > 1.0 ? 1.0 : percentageOfTimeElapsed;
		percentageOfTimeElapsed = percentageOfTimeElapsed < 0.0 ? 0.0 : percentageOfTimeElapsed;

    final value = Curves.bounceOut.transform(percentageOfTimeElapsed);
  },
);        

Now, we will get a new value inside the ticker’s callback, at every change in elapsed time. The value stored inside the variable value will always be between 0.0 to 1.0 inclusive.

Our next goal should be to use the obtained value to obtain the corresponding value of the widget’s property.

Continue here