JAVASCRIPT EXAMPLES Fading an Object
This example demonstrates the use of arbitrarily complex data structures for the startValue and endValue state properties of a Uize.Fade instance. Click the button down below to see the JavaScript animation of the Uize.Fade class in action. Clicking this button initiates the random generation of start and end colors for two different rows, so four colors in all. Each of these RGB colors is represented internally as an object, having red, green, and blue properties. When the fade is started, the start color objects for the two rows are packed into an array for the startValue state property of the fade, and the end color objects for the two rows are packed into an array for the endValue state property. On each update in the fade, the value state property is an array containing two color objects for the two rows. These color objects are the blended values, per the current position in the fade process.
| Left Colors | Faded Colors | Right Colors |