• ng.AnimationEasing is not available in the Lite version

Object ng.AnimationEasing vs. 1.1.0 FULL ONLY

The ng.AnimationEasing object contains a set of standard animation easing functions. The name of these functions (as a string) can be passed to an ng.Animation class or an HTML Element.animate method.

The ng.AnimationEasing is a JavaScript object (not a class), which means it cannot be inheritted by other classes.

Creating a New Pre-Defined Easing Function

If you would like to create your own pre-defined function and add them to the ng.AnimationEasing object, you can simply add a new key and function as the following:
JavaScript:
ng.AnimationEasing.my_easing_func = function(frm, str_val, delta, ttl_frms){
    // do stuff and return value
};

Using the above example, you can use the string 'my_easing_method' when creating new ng.Animation objects.

Easing Functions Parameters

All the functions of the ng.AnimationEasing object will receive the following parameters:
  • Integer frm: the current animation frame.
  • Integer str_val: the starting value.
  • Integer delta: The total change for the value (end value - start value).
  • Integer ttl_frms: The total number of frames.
and will return a Number for the current frame value.

Properties

Function ng.AnimationEasing.linear () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quad_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quad_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quad_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.cubic_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.cubic_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.cubic_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quart_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quart_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quart_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quint_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quint_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.quint_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.sine_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.sine_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.sine_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.expo_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.expo_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.expo_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.circ_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.circ_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.circ_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.elastic_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.elastic_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.elastic_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.back_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.back_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.back_in_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.bounce_in () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.bounce_out () vs. 1.1.0 FULL ONLY
Function ng.AnimationEasing.bounce_in_out () vs. 1.1.0 FULL ONLY

Examples

Using Easing Functions
In this example, we'll create a series of dots along the animation path. This will illustrate the animation values for each frame on a curve. The closer the dots to each other, the smaller the change between the previous and current value. For example, movement will be slower when the dots are closer to each other and faster when the dots are farther apart.
Demo: