Search documentation of Plushie

# Plushie.Animation.Easing (Plushie v0.7.2)

Copy Markdown View Source

Easing function catalogue for animations and transitions.

Provides 31 named easing curves (matching the standard set from CSS/lilt) plus custom cubic bezier support. Used by both `Plushie.Animation.Transition` (as atoms encoded for the wire protocol) and `Plushie.Animation` (as functions for SDK-side interpolation).

## Named curves

Each curve has a public function that takes a progress value `t` in `0.0..1.0` and returns the eased value. Some curves (back, elastic, bounce) can overshoot the 0..1 range.

### Linear

Constant velocity. No acceleration or deceleration.

### Sine (ease_in, ease_out, ease_in_out)

Gentle acceleration/deceleration using sine curves. The default `ease_in_out` is a good general-purpose choice.

### Power curves (quad, cubic, quart, quint)

Increasingly aggressive acceleration. Higher power = sharper start/stop.

### Exponential (expo)

Very sharp acceleration. Starts almost stationary, then accelerates rapidly.

### Circular (circ)

Based on circular arc geometry. Moderate sharpness.

### Back

Overshoots the target slightly before settling. Good for playful, bouncy interfaces.

### Elastic

Oscillates around the target like a spring on a rubber band. Large overshoot.

### Bounce

Simulates a bouncing ball. Multiple diminishing bounces at the end.

## Cubic bezier

For custom curves, pass `{:cubic_bezier, x1, y1, x2, y2}`:

    opacity: transition(300, to: 0.0, easing: {:cubic_bezier, 0.25, 0.1, 0.25, 1.0})

Control points match the CSS `cubic-bezier()` function.

## Summary

### Types

named()
t()

### Functions

cubic_bezier(t, x1, y1, x2, y2)

Evaluates a cubic bezier easing curve at progress `t`.

ease_in(t)

Sine ease in: gentle acceleration.

ease_in_back(t)

Back ease in: pulls back before accelerating.

ease_in_bounce(t)

Bounce ease in.

ease_in_circ(t)

Circular ease in.

ease_in_cubic(t)

Cubic ease in.

ease_in_elastic(t)

Elastic ease in: oscillates then accelerates.

ease_in_expo(t)

Exponential ease in.

ease_in_out(t)

Sine ease in-out: gentle acceleration and deceleration.

ease_in_out_back(t)

Back ease in-out: pulls back and overshoots.

ease_in_out_bounce(t)

Bounce ease in-out.

ease_in_out_circ(t)

Circular ease in-out.

ease_in_out_cubic(t)

Cubic ease in-out.

ease_in_out_elastic(t)

Elastic ease in-out.

ease_in_out_expo(t)

Exponential ease in-out.

ease_in_out_quad(t)

Quadratic ease in-out.

ease_in_out_quart(t)

Quartic ease in-out.

ease_in_out_quint(t)

Quintic ease in-out.

ease_in_quad(t)

Quadratic ease in.

ease_in_quart(t)

Quartic ease in.

ease_in_quint(t)

Quintic ease in.

ease_out(t)

Sine ease out: gentle deceleration.

ease_out_back(t)

Back ease out: overshoots then settles.

ease_out_bounce(t)

Bounce ease out: bouncing ball effect.

ease_out_circ(t)

Circular ease out.

ease_out_cubic(t)

Cubic ease out.

ease_out_elastic(t)

Elastic ease out: overshoots with oscillation.

ease_out_expo(t)

Exponential ease out.

ease_out_quad(t)

Quadratic ease out.

ease_out_quart(t)

Quartic ease out.

ease_out_quint(t)

Quintic ease out.

function(arg1)

Returns the Elixir easing function for SDK-side interpolation.

interpolate(a, b, t, easing)

Interpolates a value from `a` to `b` at progress `t` with the given easing.

linear(t)

Linear easing: constant velocity.

name(easing)

Returns the wire-format string for an easing spec.

named_easings()

Returns the list of all named easing atoms.

valid?(easing)

Returns true if the value is a valid easing spec.

## Types

# named()

    @type named() ::
      :linear
      | :ease_in
      | :ease_out
      | :ease_in_out
      | :ease_in_quad
      | :ease_out_quad
      | :ease_in_out_quad
      | :ease_in_cubic
      | :ease_out_cubic
      | :ease_in_out_cubic
      | :ease_in_quart
      | :ease_out_quart
      | :ease_in_out_quart
      | :ease_in_quint
      | :ease_out_quint
      | :ease_in_out_quint
      | :ease_in_expo
      | :ease_out_expo
      | :ease_in_out_expo
      | :ease_in_circ
      | :ease_out_circ
      | :ease_in_out_circ
      | :ease_in_back
      | :ease_out_back
      | :ease_in_out_back
      | :ease_in_elastic
      | :ease_out_elastic
      | :ease_in_out_elastic
      | :ease_in_bounce
      | :ease_out_bounce
      | :ease_in_out_bounce

# t()

    @type t() :: named() | {:cubic_bezier, float(), float(), float(), float()}

## Functions

# cubic_bezier(t, x1, y1, x2, y2)

    @spec cubic_bezier(
      t :: float(),
      x1 :: float(),
      y1 :: float(),
      x2 :: float(),
      y2 :: float()
    ) :: float()

Evaluates a cubic bezier easing curve at progress `t`.

Control points `(x1, y1)` and `(x2, y2)` match the CSS `cubic-bezier()` function. The curve starts at `(0, 0)` and ends at `(1, 1)`.

Uses Newton-Raphson iteration to solve for the parameter given the x coordinate, then evaluates y at that parameter.

# ease_in(t)

    @spec ease_in(float()) :: float()

Sine ease in: gentle acceleration.

# ease_in_back(t)

    @spec ease_in_back(float()) :: float()

Back ease in: pulls back before accelerating.

# ease_in_bounce(t)

    @spec ease_in_bounce(float()) :: float()

Bounce ease in.

# ease_in_circ(t)

    @spec ease_in_circ(float()) :: float()

Circular ease in.

# ease_in_cubic(t)

    @spec ease_in_cubic(float()) :: float()

Cubic ease in.

# ease_in_elastic(t)

    @spec ease_in_elastic(float()) :: float()

Elastic ease in: oscillates then accelerates.

# ease_in_expo(t)

    @spec ease_in_expo(float()) :: float()

Exponential ease in.

# ease_in_out(t)

    @spec ease_in_out(float()) :: float()

Sine ease in-out: gentle acceleration and deceleration.

# ease_in_out_back(t)

    @spec ease_in_out_back(float()) :: float()

Back ease in-out: pulls back and overshoots.

# ease_in_out_bounce(t)

    @spec ease_in_out_bounce(float()) :: float()

Bounce ease in-out.

# ease_in_out_circ(t)

    @spec ease_in_out_circ(float()) :: float()

Circular ease in-out.

# ease_in_out_cubic(t)

    @spec ease_in_out_cubic(float()) :: float()

Cubic ease in-out.

# ease_in_out_elastic(t)

    @spec ease_in_out_elastic(float()) :: float()

Elastic ease in-out.

# ease_in_out_expo(t)

    @spec ease_in_out_expo(float()) :: float()

Exponential ease in-out.

# ease_in_out_quad(t)

    @spec ease_in_out_quad(float()) :: float()

Quadratic ease in-out.

# ease_in_out_quart(t)

    @spec ease_in_out_quart(float()) :: float()

Quartic ease in-out.

# ease_in_out_quint(t)

    @spec ease_in_out_quint(float()) :: float()

Quintic ease in-out.

# ease_in_quad(t)

    @spec ease_in_quad(float()) :: float()

Quadratic ease in.

# ease_in_quart(t)

    @spec ease_in_quart(float()) :: float()

Quartic ease in.

# ease_in_quint(t)

    @spec ease_in_quint(float()) :: float()

Quintic ease in.

# ease_out(t)

    @spec ease_out(float()) :: float()

Sine ease out: gentle deceleration.

# ease_out_back(t)

    @spec ease_out_back(float()) :: float()

Back ease out: overshoots then settles.

# ease_out_bounce(t)

    @spec ease_out_bounce(float()) :: float()

Bounce ease out: bouncing ball effect.

# ease_out_circ(t)

    @spec ease_out_circ(float()) :: float()

Circular ease out.

# ease_out_cubic(t)

    @spec ease_out_cubic(float()) :: float()

Cubic ease out.

# ease_out_elastic(t)

    @spec ease_out_elastic(float()) :: float()

Elastic ease out: overshoots with oscillation.

# ease_out_expo(t)

    @spec ease_out_expo(float()) :: float()

Exponential ease out.

# ease_out_quad(t)

    @spec ease_out_quad(float()) :: float()

Quadratic ease out.

# ease_out_quart(t)

    @spec ease_out_quart(float()) :: float()

Quartic ease out.

# ease_out_quint(t)

    @spec ease_out_quint(float()) :: float()

Quintic ease out.

# function(arg1)

    @spec function(t()) :: (float() -> float())

Returns the Elixir easing function for SDK-side interpolation.

The returned function takes a float `t` in `0.0..1.0` and returns the eased progress value.

# interpolate(a, b, t, easing)

    @spec interpolate(a :: number(), b :: number(), t :: float(), easing :: t()) ::
      float()

Interpolates a value from `a` to `b` at progress `t` with the given easing.

    iex> Easing.interpolate(0.0, 100.0, 0.5, :linear)
    50.0

# linear(t)

    @spec linear(float()) :: float()

Linear easing: constant velocity.

# name(easing)

    @spec name(t()) :: String.t() | map()

Returns the wire-format string for an easing spec.

# named_easings()

    @spec named_easings() :: [named()]

Returns the list of all named easing atoms.

# valid?(easing)

    @spec valid?(term()) :: boolean()

Returns true if the value is a valid easing spec.