ts-curves v1.0.1
š¦
Ts-Curves
Just input the progress and get your curve, it's that simple. as well keep in mind that progess is inbetween 0 to 1.
Features
Typescript Intellisense
Include definations for most of easing curves, So you would not need to check browser for what does this curve do,
Mention
- Most of the Curves Taken from flutter Official repo link
Curves
DecelerateCurve: Decelerate()
A curve where the rate of change starts out quickly and then decelerates; an upside-down f(t) = tĀ² parabola.
fastLinearToSlowEaseIn: 0.18, 1.0, 0.04, 1.0
A curve that is very steep and linear at the beginning, but quickly flattens out and very slowly eases in
By default is the curve used to animate pages on iOS back to their original position if a swipe gesture is ended midway through a swipe.
ease: 0.25, 0.1, 0.25, 1.0
A cubic animation curve that speeds up quickly and ends slowly.
easeIn: 0.42, 0.0, 1.0, 1.0
A cubic animation curve that starts slowly and ends quickly.
easeInToLinear: 0.67, 0.03, 0.65, 0.09
A cubic animation curve that starts slowly and ends linearly.
The symmetric animation to linearToEaseOut.
easeInSine: 0.47, 0.0, 0.745, 0.715
A cubic animation curve that starts slowly and ends quickly.
This is similar to Curves.easeIn, but with sinusoidal easing for a slightly less abrupt beginning and end. Nonetheless, the result is quite gentle and is hard to distinguish from Curves.linear at a glance.
Derived from Robert Pennerās easing functions.
easeInQuad: 0.55, 0.085, 0.68, 0.53
A cubic animation curve that starts slowly and ends quickly.
Based on a quadratic equation where f(t) = tĀ², this is effectively the inverse of
Curves.decelerate.
Compared to Curves.easeInSine, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInCubic: 0.55, 0.055, 0.675, 0.19
A cubic animation curve that starts slowly and ends quickly.
This curve is based on a cubic equation where f(t) = tĀ³. The result is a safe sweet
spot when choosing a curve for widgets animating off the viewport.
Compared to Curves.easeInQuad, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInQuart: 0.895, 0.03, 0.685, 0.22
A cubic animation curve that starts slowly and ends quickly.
This curve is based on a quartic equation where f(t) = tā“.
Animations using this curve or steeper curves will benefit from a longer duration to avoid motion feeling unnatural.
Compared to Curves.easeInCubic, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInQuint: 0.755, 0.05, 0.855, 0.06
A cubic animation curve that starts slowly and ends quickly.
This curve is based on a quintic equation where f(t) = tāµ.
Compared to Curves.easeInQuart, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInExpo: 0.95, 0.05, 0.795, 0.035
A cubic animation curve that starts slowly and ends quickly.
This curve is based on an exponential equation where f(t) = 2Ā¹ā°ā½įµā»Ā¹ā¾.
Using this curve can give your animations extra flare, but a longer duration may need to be used to compensate for the steepness of the curve.
Compared to Curves.easeInQuint, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInCirc: 0.6, 0.04, 0.98, 0.335
A cubic animation curve that starts slowly and ends quickly.
This curve is effectively the bottom-right quarter of a circle.
Like Curves.easeInExpo, this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Derived from Robert Pennerās easing functions.
easeInBack: 0.6, -0.28, 0.735, 0.045
A cubic animation curve that starts slowly and ends quickly.
This curve is similar to Curves.elasticIn in that it overshoots its bounds before reaching its end. Instead of repeated swinging motions before ascending, though, this curve overshoots once, then continues to ascend.
Derived from Robert Pennerās easing functions.
easeOut: 0.0, 0.0, 0.58, 1.0
A cubic animation curve that starts quickly and ends slowly.
linearToEaseOut: 0.35, 0.91, 0.33, 0.97
A cubic animation curve that starts linearly and ends slowly.
A symmetric animation to easeInToLinear.
easeOutSine: 0.39, 0.575, 0.565, 1.0
A cubic animation curve that starts quickly and ends slowly.
This is similar to Curves.easeOut, but with sinusoidal easing for a slightly less abrupt beginning and end. Nonetheless, the result is quite gentle and is hard to distinguish from Curves.linear at a glance.
Derived from Robert Pennerās easing functions.
easeOutQuad: 0.25, 0.46, 0.45, 0.94
A cubic animation curve that starts quickly and ends slowly.
This is effectively the same as Curves.decelerate, only simulated using a cubic bezier function.
Compared to Curves.easeOutSine, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeOutCubic: 0.215, 0.61, 0.355, 1.0
A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of Curves.easeInCubic.
The result is a safe sweet spot when choosing a curve for animating a widget's position entering or already inside the viewport.
Compared to Curves.easeOutQuad, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeOutQuart: 0.165, 0.84, 0.44, 1.0
A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of Curves.easeInQuart.
Animations using this curve or steeper curves will benefit from a longer duration to avoid motion feeling unnatural.
Compared to Curves.easeOutCubic, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeOutQuint: 0.23, 1.0, 0.32, 1.0
A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of Curves.easeInQuint.
Compared to Curves.easeOutQuart, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeOutExpo: 0.19, 1.0, 0.22, 1.0
A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of Curves.easeInExpo. Using this curve can give your animations extra flare, but a longer duration may need to be used to compensate for the steepness of the curve.
Derived from Robert Pennerās easing functions.
easeOutCirc: 0.075, 0.82, 0.165, 1.0
A cubic animation curve that starts quickly and ends slowly.
This curve is effectively the top-left quarter of a circle.
Like Curves.easeOutExpo, this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Derived from Robert Pennerās easing functions.
easeOutBack: 0.175, 0.885, 0.32, 1.275
A cubic animation curve that starts quickly and ends slowly.
This curve is similar to Curves.elasticOut in that it overshoots its bounds before reaching its end. Instead of repeated swinging motions after ascending, though, this curve only overshoots once.
Derived from Robert Pennerās easing functions.
easeInOut: 0.42, 0.0, 0.58, 1.0
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
easeInOutSine: 0.445, 0.05, 0.55, 0.95
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This is similar to Curves.easeInOut, but with sinusoidal easing for a slightly less abrupt beginning and end.
Derived from Robert Pennerās easing functions.
easeInOutQuad: 0.455, 0.03, 0.515, 0.955
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as Curves.easeInQuad as the first half, and Curves.easeOutQuad as the second.
Compared to Curves.easeInOutSine, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInOutCubic: 0.645, 0.045, 0.355, 1.0
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as Curves.easeInCubic as the first half, and Curves.easeOutCubic as the second.
The result is a safe sweet spot when choosing a curve for a widget whose initial and final positions are both within the viewport.
Compared to Curves.easeInOutQuad, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInOutQuint: 0.86, 0.0, 0.07, 1.0
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as Curves.easeInQuint as the first half, and Curves.easeOutQuint as the second.
Compared to Curves.easeInOutQuart, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInOutExpo: 1.0, 0.0, 0.0, 1.0
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
Since this curve is arrived at with an exponential function, the midpoint is exceptionally steep.
Extra consideration should be taken when designing an animation using this.
Compared to Curves.easeInOutQuint, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInOutCirc: 0.785, 0.135, 0.15, 0.86
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as Curves.easeInCirc as the first half, and Curves.easeOutCirc as the second.
Like Curves.easeInOutExpo, this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Compared to Curves.easeInOutExpo, this curve is slightly steeper.
Derived from Robert Pennerās easing functions.
easeInOutBack: 0.68, -0.55, 0.265, 1.55
A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as Curves.easeInBack as the first half, and Curves.easeOutBack as the second.
Since two curves are used as a basis for this curve, the resulting animation will overshoot its bounds twice before reaching its end - first by exceeding its lower bound, then exceeding its upper bound and finally descending to its final position.
Derived from Robert Pennerās easing functions.
SlowInFastOut 0.4, 0.0, 0.2, 1.0
A curve that starts quickly and eases into its final position.
Over the course of the animation, the object spends more time near its final destination. As a result, the user isnāt left waiting for the animation to finish, and the negative effects of motion are minimized.
standardEasing, the name for this curve in the Material specification.