SOURCE CODE: Fading an Object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Fading an Object | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="color animation Uize.Fade"/>
  <meta name="description" content="Animate complex data objects with ease. UIZE supports compound value interpolation. See how an array of two RGB color objects can be faded over time."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    pre {


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Fading an Object
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/fading-an-object.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>This example demonstrates the use of arbitrarily complex data structures for the <code>startValue</code> and <code>endValue</code> state properties of a <a href="../reference/Uize.Fade.html"><code>Uize.Fade</code></a> instance. Click the button down below to see the JavaScript animation of the <code>Uize.Fade</code> 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 <code>red</code>, <code>green</code>, and <code>blue</code> properties. When the fade is started, the start color objects for the two rows are packed into an array for the <code>startValue</code> state property of the fade, and the end color objects for the two rows are packed into an array for the <code>endValue</code> state property. On each update in the fade, the <code>value</code> 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.</p>

  <!-- "wireframe" for the UI -->

  <table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #555; background:#fff; margin:auto;">
    <tr align="center">
      <td width="150" class="heading">Left Colors</td>
      <td width="400" class="heading">Faded Colors</td>
      <td width="150" class="heading">Right Colors</td>
    <tr height="60">
      <td id="page-color0StartSwatch"></td>
      <td id="page-color0FadeSwatch"></td>
      <td id="page-color0EndSwatch"></td>
    <tr height="60">
      <td id="page-color1StartSwatch"></td>
      <td id="page-color1FadeSwatch"></td>
      <td id="page-color1EndSwatch"></td>
    <tr height="150">
      <td><pre id="page-startValueAsJson"></pre></td>
      <td><pre id="page-valueAsJson" style="margin-left:130px;"></pre></td>
      <td><pre id="page-endValueAsJson"></pre></td>
  <div id="page-startFadeButton" style="text-align:center;"></div>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ();

    function setNodeBgColorFromRgb (node,rgb) {
      page.setNodeStyle (node,{ (rgb,'RGB string')});

    function displayColorFaderPropertyAsJson (propertyName) {
      page.setNodeValue (
        propertyName + 'AsJson', (colorFader.get (propertyName),{indentChars:'      '})

    /*** code to fade from color 1 to color 2 ***/
      var colorFader = Uize.Fade ({duration:5000});
      colorFader.wire (
        function () {
          displayColorFaderPropertyAsJson ('value');
          var value = colorFader.valueOf ();
          setNodeBgColorFromRgb ('color0FadeSwatch',value [0]);
          setNodeBgColorFromRgb ('color1FadeSwatch',value [1]);

    /*** add the fade start button ***/
      page.addChild (
          text:'RANDOMIZE AND FADE',
          action:function () {
            function makeRandomColorRgb (swatchNode) {
              function getRandom0to255 () {return Math.round (Math.random () * 255)}
              var rgb = {red:getRandom0to255 (),green:getRandom0to255 (),blue:getRandom0to255 ()};
              setNodeBgColorFromRgb (swatchNode,rgb);
              return rgb;
            colorFader.set ({
              startValue:[makeRandomColorRgb ('color0StartSwatch'),makeRandomColorRgb ('color1StartSwatch')],
              endValue:[makeRandomColorRgb ('color0EndSwatch'),makeRandomColorRgb ('color1EndSwatch')],
            displayColorFaderPropertyAsJson ('startValue');
            displayColorFaderPropertyAsJson ('endValue');
            colorFader.start ();

    /*** wire up the page widget ***/
      page.wireUi ();