Options
All
  • Public
  • Public/Protected
  • All
Menu

Class BezierEasing

Provides Cubic Bezier Curve easing, which generalizes easing functions via a four-point bezier curve. That way, you can easily create custom easing functions that will be picked up by Starling's Tween class later. To set up your bezier curves, best use a visual tool like cubic-bezier.com or Ceaser.

For example, you can add the transitions recommended by Google's Material Design standards (see here) like this:

Transitions.register("standard", BezierEasing.create(0.4, 0.0, 0.2, 1.0)); Transitions.register("decelerate", BezierEasing.create(0.0, 0.0, 0.2, 1.0)); Transitions.register("accelerate", BezierEasing.create(0.4, 0.0, 1.0, 1.0));

The create method returns a function that can be registered directly at the "Transitions" class.

Code based on gre/bezier-easing and its Starling adaptation by Rodrigo Lopez.

@see starling.animation.Transitions @see starling.animation.Juggler @see starling.animation.Tween

Hierarchy

  • BezierEasing

Index

Methods

Methods

Static create

  • create(x1: number, y1: number, x2: number, y2: number): function
  • Create an easing function that's defined by two control points of a bezier curve. The curve will always go directly through points 0 and 3, which are fixed at (0, 0) and (1, 1), respectively. Points 1 and 2 define the curvature of the bezier curve.

    The result of this method is best passed directly to Transitions.create().

    @param x1 The x coordinate of control point 1. @param y1 The y coordinate of control point 1. @param x2 The x coordinate of control point 2. @param y2 The y coordinate of control point 2. @return The transition function, which takes exactly one 'ratio:Number' parameter.

    Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number

    Returns function

      • (ratio: number): number
      • Parameters

        • ratio: number

        Returns number

Generated using TypeDoc