UIZE JavaScript Framework

MODULES Uize.Fade.xSeries

1. Introduction

The Uize.Fade.xSeries module implements static and instance methods for interpolating a series of values between specified start and end values.

DEVELOPERS: Chris van Rensburg

The Uize.Fade.xSeries module is an extension module that extends the Uize.Fade class.

1.1. In a Nutshell

The methods defined in the Uize.Fade.xSeries module utilize the Uize.Fade class to let you create arrays of interpolated values.

Typically, the Uize.Fade class is used to produce time-based animations, but this class can also be used solely for its powerful value interpolation capabilities. The getSeries and Uize.Fade.getSeries methods defined in this extension module could be useful when using fades in non-time based applications, such as displaying values in a bar chart, fading colors over a series of elements, plotting positions for a series of elements, populating data sets, etc.

EXAMPLE

function fadeNodesBgColor (nodes,startColorStr,endColorStr) {
  var colors = Uize.Fade.getSeries (
    Uize.Color.to (startColorStr,'RGB array'),
    Uize.Color.to (endColorStr,'RGB array'),
    nodes.length
  );
  for (var nodeNo = nodes.length; --nodeNo >= 0;) {
    Uize.Dom.Basics.setStyle (
      nodes [nodeNo],
      {backgroundColor:Uize.Color.to (colors [nodeNo],'#hex')}
    );
  }
}

In the above example, a function is defined that will accept an array of DOM nodes, a start color, and an end color, and will then set the background color of all the nodes by fading from the start color to the end color.

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 The Fade Factory.

1.2. Examples

There are no dedicated showcase example pages for the Uize.Fade.xSeries module.

SEARCH FOR EXAMPLES

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

SEARCH

1.3. Implementation Info

The Uize.Fade.xSeries module defines the Uize.Fade.xSeries extension module under the Uize.Fade namespace.

1.3.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

STATIC PROPERTIES

Uize.Fade.xSeries.moduleName | Uize.Fade.xSeries.pathToResources

1.3.2. Features Overridden in This Module

No features have been overridden in this module.

1.3.3. Features Inherited From Other Modules

This module has no inherited features.

1.3.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.3.5. Unit Tests

There is no dedicated unit tests module for the Uize.Fade.xSeries module.

2. Instance Methods

2.1. getSeries

Returns an array, representing a series - of the specified length - of the interpolated values that would be generated over the course of the fade's progress.

SYNTAX

valueSeriesARRAY = myInstance.getSeries (seriesLengthINT);

The value series is generated using the current values for the fade instance's state properties. This method could be useful when using fades in non-time based applications, such as displaying values in a bar chart, fading colors over a series of elements, plotting positions for a series of elements, populating data sets, etc.

NOTES

if the value 0 is specified for the seriesLengthINT parameter, then this method will return an empty array
if the value 1 is specified for the seriesLengthINT parameter, then this method will return an array containing one element whose value is the value of the fade's startValue state property
if the value 2 is specified for the seriesLengthINT parameter, then this method will return an array containing two elements, where the value of the first element is the value of the fade's startValue state property, and the value of the second element is the value of the fade's endValue state property
compare to the Uize.Fade.getSeries static method

3. Static Methods

3.1. Uize.Fade.getSeries

Returns an array, representing a series - of the specified length - of the interpolated values that would be generated over the course of a fade's progress.

SYNTAX

valueSeriesARRAY = Uize.Fade.getSeries (
  startValueNUMorARRAYorOBJ,
  endValueNUMorARRAYorOBJ,
  seriesLengthINT
);

VARIATION

valueSeriesARRAY = Uize.Fade.getSeries (
  startValueNUMorARRAYorOBJ,
  endValueNUMorARRAYorOBJ,
  seriesLengthINT,
  fadePropertiesOBJ
);

By default, the values in the series are interpolated linearly. However, by using the optional fadePropertiesOBJ parameter it is possible to control all the properties of a fade, such as curve and quantization.

NOTES

if the value 0 is specified for the seriesLengthINT parameter, then this method will return an empty array
if the value 1 is specified for the seriesLengthINT parameter, then this method will return an array containing one element whose value is the value of the startValueNUMorARRAYorOBJ parameter
if the value 2 is specified for the seriesLengthINT parameter, then this method will return an array containing two elements, where the value of the first element is the value of the startValueNUMorARRAYorOBJ parameter, and the value of the second element is the value of the endValueNUMorARRAYorOBJ parameter
compare to the getSeries instance method

4. Static Properties

4.1. Uize.Fade.xSeries.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

4.2. Uize.Fade.xSeries.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module