Bright Color Animation Source Code

Animated Flashing Colors Display in Transparent Image Areas

Color Animation Tutorial Introduction Array of Colors Toggle Animation On & Off Animation Frames More Color Tutorials!

Introduction

This Web page includes the source code for the Bright Color Animation example. Colors display on just the screen area of an Android tablet. However use similar code when you want color animation within transparent areas of any image. The following short listing initializes shared variables.

// Timer
var timer = null; 

// Cycle through array
// of colors nine times.
var iCycleMax = new Number(9);  

// First cycle.
var iCycleCount = new Number(0);

// Index into
// array of colors.
var iCycle = new Number(0);

Array of Colors

The following array of hexadecimal color values starts and ends with white. One color array selection method uses graphics editing programs, to obtain colors which reflect the style of your animation. Other color selection methods create colors dynamically or manually.


var aCycle = new Array(
"#ffffff",
"#c1b4ff",
"#896fff",
"#5fd8d2",
"#6be4ab",
"#ffdabe",
"#ffcbe8",
"#ff9eb6",
"#ffcbe8",
"#ffdabe",
"#6be4ab",
"#5fd8d2",
"#896fff",
"#c1b4ff",
"#ffffff"
);
// Maximum color
// array length.
var iCycleArrayLength = aCycle.length;

// Image element.
var eImg = null;

When the Web page loads, loadGame() activates with the body's onload event listener.

/**
* Save references 
* to the image element 
* we want to modify dynamically.
*/
function loadGame(){
 // Obtain  reference to the 
 // image element for 
 // dynamic color cycling.    
 eImg = document.getElementById(
  'eImg'
 );  
}

Toggle Animation On & Off

When the user taps the Android, colors either start animating or stop animating.

/**
 * Toggle animation
 * on and off.
 */
function colorCycleStartStop(){
 if(timer == null){
  colorCycleStart();
 }
 else {
  colorCycleStop();
 } 
}

Start the color animation.

/**
 * Start the
 * color cycle.
 */
function colorCycleStart(){
iCycle = 0;
iCycleCount = 0;

// Don't start the 
// timer twice:
if(timer == null){
 timer = setInterval(
  function(){
   colorCycleRun();},
   100
 ); 
}

}

Stop the color animation.

/**
 * Stop the 
 * color cycle.
 */
function colorCycleStop(){
 if (timer != null){
  clearInterval(
   timer
  );  
  timer = null;
 } 
   
 // Set the background color to
 // the last and first color
 // in the cycle.
 // Be sure the Web page
 // has initialized. Otherwise
 // eImg is null.
 if(eImg != null){
  eImg.style.backgroundColor = "#ffffff";  
 } 
}

Animation Frames

Animation frames simply assign one color at a time from the array of colors to the image element.

/**
 * The timer calls
 * this function.
 * Increment the
 * cycle count
 * and the index count.
 */
function colorCycleRun(){
 if (iCycle > iCycleArrayLength){

  // Number of cycles
  // through the array.
  if (iCycleCount >= iCycleMax){
   colorCycleStop();
   return;
  }

  // Initialize 
  // another cycle.
  else { 
   iCycleCount++; 
   iCycle = 0;
  }
 }
 
 // Increment the
 // index into the
 // array of colors. 
 iCycle++;

 // Assign a new
 // background color
 // to the image element.
 // Transparent areas of
 // the image show the
 // new color.
 eImg.style.backgroundColor = aCycle[iCycle];
     
}

Summary

This Web page included the source code for the Bright Color Animation example. Colors animate over the screen area of an Android tablet. However use similar code when you want color animation applied to transparent areas of any image.

See Other Color Animation Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.