Sprite Sheet Animation

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 this code when you want color animation applied to any image containing transparent areas.

// 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 array of hexadecimal color values starts and ends with white. Select colors with graphics editing programs to obtain colors most closely reflecting your style.


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;

/**
* function loadGame() saves references 
* to the elements 
* 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 cycle.
 */
function colorCycleStart(){
iCycle = 0;
iCycleCount = 0;
timer = setInterval(
 function(){
  colorCycleRun();},
 100
 ); 
}

/**
 * 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;
 }
} 
iCycle++;

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

See Other Color Animation Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.
Animated Effects