• ng.Animation is not available in the Lite version

new ng.Animation (Function func, Object start, Object end, [Integer duration = 500 ms ], [Function easing = quad_in_out ], [Integer fps = 40 ]) vs. 1.1.0 FULL ONLY

Creates a new ng.Animation object for animation and tweening between a start and end numerical values. The ng.Animation object will take a function that will be called on each frame to process the frame values. To animate an HTML element (such as a div), use the Element.animate(obj, func) method.

Parameters

Function func (obj, frame) vs. 1.1.0 FULL ONLY
This function will be called to process the animation values for the current frame. It will receive an object as a variable with all the values from the Animation start object calculated based on the frame number.
Object start Required vs. 1.1.0 FULL ONLY
The starting object for the animation. All the values should be either numeric or colors.
Object end Required vs. 1.1.0 FULL ONLY
The ending object for the animation. All the values should be either numeric or colors and all the indices in the start object should be in the end object as well.
Integer duration (Optional - Default: 500 ms (Configuration value)) vs. 1.1.0 FULL ONLY
How long should the animation last in milliseconds.
Function easing (frame, start, delta, ttl_frms) (Optional - Default: quad_in_out (Configuration value)) vs. 1.1.0 FULL ONLY
A function that handles the animation easing. A string can be used for one of the pre-defined easing function (e.g. 'quad_in_out').
Integer fps (Optional - Default: 40 (Configuration value)) vs. 1.1.0 FULL ONLY
An integer value of how many frames per second should the animation be processed.

Examples

Using ng.Animation(func, start, end, ..., ...)
In this example, we'll create a series of dots along the animation path.
Demo:
Adding Events to an ng.Animation object
In this example, we'll illustrate how to add events to the ng.Animation object. A complete list of custom events is listed below.
Demo:
Current Value:
Current Frame:

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.Animation (func, start, end, duration, easing, fps)

Methods

Function ng.Animation.play () vs. 1.1.0 FULL ONLY
Starts the animation.
Function ng.Animation.pause () vs. 1.1.0 FULL ONLY
Pauses the animation but keeps the timeline and current frame in the same position.
Function ng.Animation.reverse () vs. 1.1.0 FULL ONLY
Reverses the animation by reversing the start and end objects.
Function ng.Animation.go_to (frame) vs. 1.1.0 FULL ONLY
Moves the animation to a specific frame.
Function ng.Animation.stop () vs. 1.1.0 FULL ONLY
Stops the animation and clears the timeline. After stopping the animation, you would need to reset the timeline again to play the animation by calling the ng.Animation.set_timeline().
Function ng.Animation.set_func (func) vs. 1.1.0 FULL ONLY
Sets the animation function.
Function ng.Animation.get_func () vs. 1.1.0 FULL ONLY
Returns the animation function.
Function ng.Animation.set_start (obj) vs. 1.1.0 FULL ONLY
Set the animation start object.
Function ng.Animation.get_start () vs. 1.1.0 FULL ONLY
Returns the animation starting object.
Function ng.Animation.set_end (obj) vs. 1.1.0 FULL ONLY
Sets the animation end object.
Function ng.Animation.get_end () vs. 1.1.0 FULL ONLY
Returns the animation ending object.
Function ng.Animation.set_duration (tm) vs. 1.1.0 FULL ONLY
Sets the animation duration in milliseconds.
Function ng.Animation.get_duration () vs. 1.1.0 FULL ONLY
Gets the animation duration in milliseconds.
Function ng.Animation.set_easing (easing) vs. 1.1.0 FULL ONLY
Set the animation easing function.
Function ng.Animation.get_easing () vs. 1.1.0 FULL ONLY
Returns the animation easing function.
Function ng.Animation.set_timeline () vs. 1.1.0 FULL ONLY
Recreates the animation timeline based on the animation values and options. You only need to use this method if you set new values or options (using one of the setter functions) or stopped the animation using the ng.Animation.stop().
Function ng.Animation.get_frame () vs. 1.1.0 FULL ONLY
Returns the current frame number in the animation.
Function ng.Animation.set_fps (fps) vs. 1.1.0 FULL ONLY
Sets the frames per second for the animation.
Function ng.Animation.get_fps () vs. 1.1.0 FULL ONLY
Gets the frames per second for the animation.

Custom Events

In the events' functions, the this will refer to the class object.
Event onPlay vs. 1.1.0 FULL ONLY
Fires when the animation starts playing.
Event onFinish vs. 1.1.0 FULL ONLY
Fires when the animation finishes.
Event onStop vs. 1.1.0 FULL ONLY
Fires when the animation is stopped.
Event onPause vs. 1.1.0 FULL ONLY
Fires when the animation is paused.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.