Animation

Overview

KUTE.js has a collection of Object items that store utilities, easing functions, interpolation functions, value processing functions, tween options and other values. There are three variations of this class and each is responsible for initializing components for KUTE.js by populating these objects and linking them to the animation execution context.

Animation Base

The Animation Base class will only initialize component associated render functions and expects the input values to be pre-processed. They are the Interpolate function(s), the onStart and the onComplete functions, but will exclude any value processing or post processing functionality.

The class is useful for creating very light distributions of KUTE.js capable of creating tween objects with preprocessed and ready to interpolate values. Because some SVG based components, color properties and others require lots of value processing for quite some space, you now have the option to store the processed values from tween objects that have completed their animation once and use them as preprocessed values in other tween objects.

To help you work with pre-made tween objects, you have two utilities at hand for storing/reusing ready to interpolate values: toJSON() to export the tween object valuesStart and valuesEnd after all value processing and post-processing, and fromJSON() to extract the same two objects from a JSON string. These utilities aren't included in the official build.

In other cases we can process values with a simple parseFloat or parseInt to make sure we have proper numbers to interpolate.

This class is separated from the following two discussed below.

Animation

The Animation class will initialize all component associated Interpolate function(s), and all required functions of any KUTE.js component, namely:

• prepareStart - the function that checks the property current value and enables the to() and the allTo() interface methods. If you're always using fromTo() and allFromTo() methods, this function is optional.
• prepareProperty - the function responsible for the property value processing. This function is required for any interface method and in any distribution that is expected to process a wide variety of input values.
• crossCheck - the function that handles post processing for the property. This function is optional in most cases.
• onStart - the function that registers the property update function(s) into the KUTE.js execution context. This function is required.
• onComplete - the function that executes when the animation of the property ends. This function is also optional.

In addition to the above Animation Base class, the standard class will check for duplicated components and / or properties to ensure overall consistency and throws a warning when duplicates are detected.

The component initialization is executed in a try{} and catch(e){} wrapper so it doesn't break your entire page for a simple type error.

On a KUTE.js demo page, open the browser console and type in KUTE.Components and hit Enter, you will see all initialized components with minimal information of their supported property or properties.

The official of KUTE.js distribution file includes this class.

Animation Development

The Animation Development class extends the standard Animation class and provides additional information on component status, capability and functionality.

The class inherits all the parent class functionality and was designed to help you create your own components for your specific needs.

On a KUTE.js demo page, open the browser console and type in KUTE.Components and hit Enter, you will see all initialized components with all the information of their supported property or properties, as well as what interface methods they are compatible with, all newly registered interpolation functions and the actual functions needed for the update function.