An easing function is used in animation to make a transition between two values appear more lifelike or interesting. Easing functions can make sliding panels or bouncing menus appear to be physical objects.
All easing functions expect inputs to be bewteen zero and one, and will typically output in that range. Easing "in" happens at the start of the transition, easing "out" at the end, and "inOut" on both sides. The functions provided here are meant to match the graphical examples on easings.net.
import Ease
n = 10
List.map (\i -> Ease.inQuad (toFloat i / n)) (List.range 0 n)
--> [0, 0.01, 0.04, 0.09, 0.16, 0.25, 0.36, 0.49, 0.64, 0.81, 1]
List.map (\i -> Ease.outCubic (toFloat i / n)) (List.range 0 n)
--> [0, 0.271, 0.488, 0.657, 0.784, 0.875, 0.936, 0.973, 0.992, 0.999, 1]
Basics.Float -> Basics.Float
A type alias to make it easier to refer to easing functions.
bezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
A cubic bezier function using 4 parameters: x and y position of first control point, and x and y position of second control point.
See here for examples or here to test.
linear : Easing
A linear ease, equal to the identity function. Linear eases often appear mechanical and unphysical.
inQuad : Basics.Float -> Basics.Float
outQuad : Easing
inOutQuad : Easing
inCubic : Basics.Float -> Basics.Float
outCubic : Easing
inOutCubic : Easing
inQuart : Basics.Float -> Basics.Float
outQuart : Easing
inOutQuart : Easing
inQuint : Basics.Float -> Basics.Float
outQuint : Easing
inOutQuint : Easing
inSine : Easing
outSine : Basics.Float -> Basics.Float
inOutSine : Easing
inExpo : Basics.Float -> Basics.Float
outExpo : Easing
inOutExpo : Easing
inCirc : Easing
outCirc : Basics.Float -> Basics.Float
inOutCirc : Easing
inBack : Basics.Float -> Basics.Float
outBack : Easing
inOutBack : Easing
inBounce : Easing
outBounce : Basics.Float -> Basics.Float
inOutBounce : Easing
inElastic : Basics.Float -> Basics.Float
outElastic : Easing
inOutElastic : Easing
reverse : Easing -> Basics.Float -> Basics.Float
Reverse an Easing
function. If an object follows an easing function and then the reversed easing function, it
retraces exactly the same path, backwards.
Graphically, this flips the function around x = 0.5.
flip : Easing -> Basics.Float -> Basics.Float
Flip an easing function. A transition that starts fast and continues slow now starts slow and continues fast.
Graphically, this flips the function around x = 0.5 and then around y = 0.5.
inOut : Easing -> Easing -> Basics.Float -> Basics.Float
Makes an easing function using two other easing functions. The first half the first Easing
function is used, the other half the second.
retour : Easing -> Basics.Float -> Basics.Float
Makes an Easing
function go to the end first and then back to the start. A transition that starts low and goes
high now starts low, goes high at halfway, and then goes low again.