The Uize.Curve module provides built-in curve function generators for power easing curves, "sweetened" power easing curves, sinusoidal easing curves, circular easing curves, exponential easing curves, and basic straight line curves.

This module also provides curve function modifiers for making ease-out, ease-in-out, and ease-in-the-middle curve functions from ease-in curve functions, as well as a method for making ease-in, ease-out, ease-in-out, and ease-in-the-middle curve function generators from an ease-in curve function generator. Finally, miscellaneous services are provided that are useful for other curve related modules, such as the Uize.Curve.linear curve function, Uize.Curve.resolve static method, etc.

BACKGROUND READING

For an in-depth discussion on animation in the UIZE JavaScript Framework, and for a discussion on how this module fits into the larger picture, consult the guide JavaScript Animation and Effects and read through the section Curves.

The following example pages are good showcases for the Uize.Curve module...

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Curve module...

SEARCH

The Uize.Curve module defines the Uize.Curve package under the Uize namespace.

1.3.1. Features Introduced in This Module

1.3.2. Features Overridden in This Module

1.3.3. Features Inherited From Other Modules

1.3.4. Modules Directly Under This Namespace

1.3.5. Unit Tests

Returns a floating point number, that is the blend between the two specified floating point numbers, using the specified blend amount.

SYNTAX

blendedFLOAT = Uize.Curve.blendFloats (value1FLOAT,value2FLOAT,blend0to1FLOAT);

When the value 0 is specified for the blend0to1FLOAT parameter, the value of the value1FLOAT parameter will be returned. When the value 1 is specified for blend0to1FLOAT, then the value of value2FLOAT will be returned. And when the value .5 is specified for blend0to1FLOAT, then the returned value will be an equal blend between the values of value1FLOAT and value2FLOAT. The blend between the values of value1FLOAT and value2FLOAT, as specified by the blend0to1FLOAT parameter, is a simple linear interpolation.

NOTES

IMPLEMENTATION INFO

Circular easing in - accelerating from zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeInCircular ();

VARIATION

curveFUNC = Uize.Curve.easeInCircular (powerFLOAT);

When the optional powerFLOAT parameter is specified, a curve function can be generated that is not perfectly circular but still has the property of being symmetrical with respect to the diagonal that runs from bottom left to top right. When the powerFLOAT parameter is not specified, the value 2 is used as its default. Values higher than 2 will produce curves that bend down towards the bottom right corner, and positive values lower than 2 will produce curves that bend upwards towards the top left corner (0 being the most extreme). The value 1 will produce a linear curve, and values between 1 and 2 will produce curves that are between perfectly linear and perfectly circular.

NOTES

IMPLEMENTATION INFO

Exponential easing in - accelerating from zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeInExpo ();

NOTES

IMPLEMENTATION INFO

Circular easing in/out - acceleration until halfway, then deceleration.

SYNTAX

curveFUNC = Uize.Curve.easeInOutCircular ();

VARIATION

curveFUNC = Uize.Curve.easeInOutCircular (powerFLOAT);

When the optional powerFLOAT parameter is specified, a curve function can be generated that is not perfectly circular but still has the property of being symmetrical with respect to the diagonal that runs from bottom left to top right. When the powerFLOAT parameter is not specified, the value 2 is used as its default. Values higher than 2 and positive values lower than 2 will produce curves that bend more extremely towards the corners. The value 1 will produce a linear curve, and values between 1 and 2 will produce curves that are between perfectly linear and perfectly circular.

NOTES

IMPLEMENTATION INFO

Exponential easing in/out - accelerating until halfway, then decelerating.

SYNTAX

curveFUNC = Uize.Curve.easeInOutExpo ();

NOTES

IMPLEMENTATION INFO

Power easing in/out - acceleration until halfway, then deceleration, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeInOutPow (powerFLOAT);

This method returns optimized curve functions for the powers .5 (square root), 1 (linear), 2 (squared / quadratic), 3 (cubic), 4 (quartic), and 5 (quintic).

NOTES

IMPLEMENTATION INFO

Sinusoidal easing in/out - accelerating until halfway, then decelerating.

SYNTAX

curveFUNC = Uize.Curve.easeInOutSine ();

NOTES

IMPLEMENTATION INFO

Sweetened power easing in/out - acceleration until halfway, then deceleration, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeInOutSweetPow (powerFLOAT);

A standard power curve is "sweetened" by blending it equally with the 180 degree rotated version of its corresponding inverse power curve, producing a curve that is closer to being circular.

NOTES

IMPLEMENTATION INFO

Power easing in - accelerating from zero velocity, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeInPow (powerFLOAT);

This method returns optimized curve functions for the powers .5 (square root), 1 (linear), 2 (squared / quadratic), 3 (cubic), 4 (quartic), and 5 (quintic).

NOTES

IMPLEMENTATION INFO

Sinusoidal easing in - accelerating from zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeInSine ();

NOTES

IMPLEMENTATION INFO

Sweetened power easing in - accelerating from zero velocity, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeInSweetPow (powerFLOAT);

A standard power curve is "sweetened" by blending it equally with the 180 degree rotated version of its corresponding inverse power curve, producing a curve that is closer to being circular.

NOTES

IMPLEMENTATION INFO

Circular easing in the middle - deceleration until halfway, then acceleration.

SYNTAX

curveFUNC = Uize.Curve.easeMiddleCircular ();

VARIATION

curveFUNC = Uize.Curve.easeMiddleCircular (powerFLOAT);

When the optional powerFLOAT parameter is specified, a curve function can be generated that is not perfectly circular but still has the property of being symmetrical with respect to the diagonal that runs from bottom left to top right. When the powerFLOAT parameter is not specified, the value 2 is used as its default. Values higher than 2 and positive values lower than 2 will produce curves that bend more extremely towards the corners. The value 1 will produce a linear curve, and values between 1 and 2 will produce curves that are between perfectly linear and perfectly circular.

NOTES

IMPLEMENTATION INFO

Exponential easing in the middle - decelerating until halfway, then accelerating.

SYNTAX

curveFUNC = Uize.Curve.easeMiddleExpo ();

NOTES

IMPLEMENTATION INFO

Power easing in the middle - deceleration until halfway, then acceleration, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeMiddlePow (powerFLOAT);

This method returns optimized curve functions for the powers .5 (square root), 1 (linear), 2 (squared / quadratic), 3 (cubic), 4 (quartic), and 5 (quintic).

NOTES

IMPLEMENTATION INFO

Sinusoidal easing in the middle - decelerating until halfway, then accelerating.

SYNTAX

curveFUNC = Uize.Curve.easeMiddleSine ();

NOTES

IMPLEMENTATION INFO

Sweetened power easing in the middle - deceleration until halfway, then acceleration, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeMiddleSweetPow (powerFLOAT);

A standard power curve is "sweetened" by blending it equally with the 180 degree rotated version of its corresponding inverse power curve, producing a curve that is closer to being circular.

NOTES

IMPLEMENTATION INFO

Circular easing out - decelerating to zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeOutCircular ();

VARIATION

curveFUNC = Uize.Curve.easeOutCircular (powerFLOAT);

When the optional powerFLOAT parameter is specified, a curve function can be generated that is not perfectly circular but still has the property of being symmetrical with respect to the diagonal that runs from bottom left to top right. When the powerFLOAT parameter is not specified, the value 2 is used as its default. Values higher than 2 will produce curves that bend upwards towards the top left corner, and positive values lower than 2 will produce curves that bend downwards towards the bottom right corner (0 being the most extreme). The value 1 will produce a linear curve, and values between 1 and 2 will produce curves that are between perfectly linear and perfectly circular.

NOTES

IMPLEMENTATION INFO

Exponential easing out - decelerating to zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeOutExpo ();

NOTES

IMPLEMENTATION INFO

Power easing out - decelerating to zero velocity, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeOutPow (powerFLOAT);

This method returns optimized curve functions for the powers .5 (square root), 1 (linear), 2 (squared / quadratic), 3 (cubic), 4 (quartic), and 5 (quintic).

NOTES

IMPLEMENTATION INFO

Sinusoidal easing out - decelerating to zero velocity.

SYNTAX

curveFUNC = Uize.Curve.easeOutSine ();

NOTES

IMPLEMENTATION INFO

Sweetened power easing out - decelerating to zero velocity, where the power can be specified.

SYNTAX

curveFUNC = Uize.Curve.easeOutSweetPow (powerFLOAT);

A standard power curve is "sweetened" by blending it equally with the 180 degree rotated version of its corresponding inverse power curve, producing a curve that is closer to being circular.

NOTES

IMPLEMENTATION INFO

Returns a curve function, being a linear curve between the specified start and end values.

SYNTAX

curveFUNC = Uize.Curve.line (startValue0to1FLOAT,endValue0to1FLOAT);

This method allows us to create curve functions that don't observe the Start At 0, End At 1 rule of curve functions, so it is not always appropriate for use in controlling fades. This method is more useful for creating value ranges that can be supplied to curve function modifiers that accept value ranges for parameters. Consider the following example of using the Uize.Curve.Mod.blend static method...

EXAMPLE

Uize.Curve.Mod.blend (
  Uize.Curve.easeOutPow (4),  // ease-out power curve function
  Uize.Curve.saw (20,.5),     // sawtooth curve function with 20 teeth
  Uize.Curve.line (.25,.75)   // line starting at .25 and ending at .75
)

In the above example, a quartic ease-out power curve function is being blended with a sawtooth curve function with twenty teeth. The Uize.Curve.line method is being used to create a value range from .25 to .75 to control the blend between the two curve functions across the range of input values. At the input value of 0, the blend between the curves will be .25. At the input value of 1, the blend between the curves will be .75. At the input value of .5, the blend between the curves will be .5 (the midpoint value of the line curve).

VARIATION 1

curveFUNC = Uize.Curve.line (startValue0to1FLOAT);

When no endValue0to1FLOAT parameter is specified (or if the same value is specified for both the startValue0to1FLOAT and endValue0to1FLOAT parameters), then the curve function returned will be for a flat line that is always at the specified start value (i.e. it starts at the start value and ends at the start value).

VARIATION 2

curveFUNC = Uize.Curve.line ();

When no parameters are specified (or if the value 0 is specified for the startValue0to1FLOAT parameter and the value 1 is specified for the endValue0to1FLOAT parameter), then a reference to Uize.Curve.linear (a linear curve function) will be returned.

NOTES

IMPLEMENTATION INFO

A simple linear curve function (i.e. NOT a curve function generator) that merely returns the value that is passed into it.

SYNTAX

valueANYTYPE = Uize.Curve.linear (valueANYTYPE);

This method / curve function is useful for curve function modifiers that expect curve functions as parameters. One is not likely to call this method directly, but instead supply it - by reference - as a parameter to other methods.

NOTES

IMPLEMENTATION INFO

Return a blender function, that will use the specified curve function when blending between two values.

SYNTAX

blenderFUNC = Uize.Curve.makeBlender (curveFUNCorFLOAT);

The blender function that is returned by this method has the same signature as the Uize.Curve.blendFloats static method and accepts three parameters: value1FLOAT, value2FLOAT, and blend0to1FLOAT.

EXAMPLE

var
  bouncyBlender = Uize.Curve.makeBlender (Uize.Curve.Rubber.easeOutBounce (4,2)),
  middleOfBounceValue = bouncyBlender (0,255,.5)  // result is 90.4438142188662
;

In the above example, the middleOfBounceValue variable will be left with the value 90.4438142188662, being the value halfway between 0 and 255 on an extra bouncy ease-out bounce curve with four bounces.

NOTES

IMPLEMENTATION INFO

Returns an ease-in-out curve function, that uses the specified ease-in curve function to produce a two phase curve that has an ease-in phase followed by an ease-out phase.

SYNTAX

easeInOutCurveFUNC = Uize.Curve.makeEaseInOut (easeInCurveFUNC);

Assuming that the curve function specified by the easeInCurveFUNC parameter is truly for an ease-in curve function, then the curve function that is returned by this method will effectively be an ease-in-out curve function.

NOTES

IMPLEMENTATION INFO

Returns an ease-in-the-middle curve function, that uses the specified ease-in curve function to produce a two phase curve that has an ease-out phase followed by an ease-in phase.

SYNTAX

easeMiddleCurveFUNC = Uize.Curve.makeEaseMiddle (easeInCurveFUNC);

Assuming that the curve function specified by the easeInCurveFUNC parameter is truly for an ease-in curve function, then the curve function that is returned by this method will effectively be an ease-in-the-middle curve function.

NOTES

IMPLEMENTATION INFO

Returns an ease-out curve function, that is the 180 degree rotated version of the specified ease-in curve function.

SYNTAX

easeOutCurveFUNC = Uize.Curve.makeEaseOut (easeInCurveFUNC);

Assuming that the curve function specified by the easeInCurveFUNC parameter is truly for an ease-in curve function, then the curve function that is returned by this method will effectively be an ease-out curve function.

NOTES

IMPLEMENTATION INFO

Makes static methods for generating an ease-in curve function, ease-out curve function, ease-in-out curve function, and ease-in-the-middle curve function, using the specified ease-in curve function generator.

SYNTAX

Uize.Curve.makeEasingCurveGenerators (
  methodNameSuffixSTR,
  easeInCurveGeneratorFUNC,
  contextOBJ
);

This method is provided as a convenience to make it easier to spawn easing curve function generators for different types of curves. The Uize.Curve module, itself, uses this method to create its many curve function generator methods, as does the Uize.Curve.Rubber module.

2.28.1. Parameters

2.28.2. Examples

Uize.Curve.makeEasingCurveGenerators (
  'Power',
  function (power) {
    if (power == null) power = 2;
    return function (value) {return Math.pow (value,power)};
  }
);

// now you can call the newly created static methods...

Uize.Curve.easeInPower ();
Uize.Curve.easeInPower (2);
Uize.Curve.easeOutPower (3);
Uize.Curve.easeInOutPower (2.5);
Uize.Curve.easeMiddlePower (3.1);

function powerCurve (power) {
  if (power == null) power = 2;
  return function (value) {return Math.pow (value,power)};
};
Uize.Curve.makeEasingCurveGenerators ('',powerCurve,powerCurve);

// now you can call the newly created static methods...

powerCurve.easeIn ();   // equivalent to powerCurve (2)
powerCurve.easeIn (2);  // equivalent to powerCurve (2)
powerCurve.easeOut (3);
powerCurve.eastInOut (2.5);
powerCurve.easeMiddle (3.1);

2.28.3. Caching of Paramless Versions

NOTES

IMPLEMENTATION INFO

Resolves the specified curve function or power curve value to a curve function and returns it.

SYNTAX

curveFUNC = Uize.Curve.resolve (
  curveFUNCorFLOAT,         // value to be resolved to a curve function (optional)
  defaultCurveFUNCorFLOAT,  // default curve function or power (optional)
  sweetBOOL,                // use sweetened power curve functions (optional)
  polarityINT               // polarity, in case negating is desired (optional)
);

This method can be useful when implementing your own curve function generators - for either complex curves or for curve function modifiers - and when such curve function generators wish to support the numerical shorthand for specifying power curve functions for parameters that are curve functions.

A good example of this is the Uize.Curve.Mod.bend static method of the Uize.Curve.Mod module. This method accepts a curve and then bends it horizontally and/or vertically, using specified curves for both horizontal and vertical bending. In most simple cases, power curve functions are effective for achieving smooth / regular bending. The Uize.Curve.Mod.bend method supports numerical values for its horzBendFLOATorFUNC and vertBendFLOATorFUNC parameters (a convenience provided to applications that wish to use the method), and its implementation uses the Uize.Curve.resolve method to resolve these numerical values to actual curve functions.

2.29.1. Parameters

2.29.2. Variations

curveFUNC = Uize.Curve.resolve (curveFUNCorFLOAT,defaultCurveFUNCorFLOATsweetBOOL);

curveFUNC = Uize.Curve.resolve (curveFUNCorFLOAT,defaultCurveFUNCorFLOAT);

curveFUNC = Uize.Curve.resolve (curveFUNCorFLOAT);

curveFUNC = Uize.Curve.resolve ();

IMPLEMENTATION INFO

Returns a sawtooth curve function, where the number of teeth and the amount of the sawtooth effect can be specified.

SYNTAX

curveFUNC = Uize.Curve.saw (repeatsINT,amount0to1FLOAT);

PARAMETERS

VARIATION

curveFUNC = Uize.Curve.saw (repeatsINT);

When no amount0to1FLOAT parameter is specified, the value 1 is used as the default. This produces a harsh sawtooth curve function, with each tooth using the full vertical range of 0 to 1.

IMPLEMENTATION INFO

IMPLEMENTATION INFO

IMPLEMENTATION INFO