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.

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

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

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 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

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

IMPLEMENTATION INFO

this feature was introduced in this module

IMPLEMENTATION INFO

this feature was introduced in this module