Custom Curves - Sine and Spring

In this lecture we will take a look at how we can create our own custom Curve. A curve in Flutter can be any mapping of a function over a time period of 0 to 1.

For example,

f(x) = mx+c

Would be a straight line, with constants m and c.

An easing curve, i.e. a mapping of the unit interval to the unit interval.

Easing curves are used to adjust the rate of change of an animation over time, allowing them to speed up and slow down, rather than moving at a constant rate.

A curve must map t=0.0 to 0.0 and t=1.0 to 1.0.

To facilitate with the creation of our curves, we will be making use of the Desmos Graphing Calculator: https://www.desmos.com/calculator

If you need unique animations in your application, or animations that require specific behavior, then knowing how to create your own Curve will be of great value. There is no limit to what curve you can create.

Here is the link to the spring curve that is used as an example in this lecture:

https://www.desmos.com/calculator/6gbvrm5i0s

The sine curve is left as a challenge to you, see if you can create the curve in the Desmos Graphing Calculator.

Playground

Play around with the values for the sine and spring curves and see what happens. Or try and create your own curve. Share with us in the comments what you make.