Updated Sunset Color Animation JavaScript

Color Animation Tutorial Sunset Color Animation Introduction JavaScript Color Array function colorCycleRun() More Color Tutorials!

Introduction

The JavaScript was changed after creating the first Sunset Color Animation tutorial. The colors are a little more natural. A small div element displays the actual color and hexadecimal number during animation.

The code presented here is the new version used in the current sunset color animation example.

JavaScript

var timer = null;     
 
// Increase to
// loop more times.
// Three sunrise sunsets.
var iCycleMax = new Number(
 3
); 

// Counts to limit
// color cycles.
var iCycleCount = new Number(
 0
);

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

Color Array

// Array of colors
var aCycle = new Array(
"#000000",
"#130d36",
"#171041",
"#1c144f",
"#231860",
"#271b6c",
"#2b1d76",
"#33238e",
"#3e2bad",
"#4630c2",
"#4c34d2",
"#5339e7",
"#593df7",
"#6f35f4",
"#832ef2",
"#a521ed",
"#bc18ea",
"#e00be6",
"#ec06e4", 
"#e00be6",
"#bc18ea",
"#a521ed",
"#832ef2",
"#6f35f4",
"#593df7",
"#5339e7",
"#4c34d2",
"#4630c2",
"#3e2bad",
"#33238e",
"#271b6c",
"#231962",
"#1f1657",
"#1b134b",
"#171040",
"#110c2f",
"#000000"
);

// Element behind
// the alpha transparent
// PNG image file.
var elemA = null; 

// Color output element.
var eColorTest = null;

// Maximum color
// array length.
var iCycleArrayLength = aCycle.length;

/**
* function loadGame() saves
* references to the elements 
* we want to modify dynamically.
*/
function loadGame(){

elemA = document.getElementById(
 'a'
);

eColorTest = document.getElementById(
 "color-test"
); 
   
}

/**
* Start the timer.
*/
function colorCycleStart(){

 iCycle = 0;
 
 iCycleCount = 0;
 
 if (elemA != null){
 
  timer = setInterval(
  
   function(){
  
   colorCycleRun();
   
  },
   
   64
  ); 
 }    
}

/**
* Stop the timer.
*/
function colorCycleStop(){
if (timer != null){

 clearInterval(
  timer
 );
   
 timer = null;   
}    

// Set the background color 
// to the last color in the cycle.
elemA.style.backgroundColor = "#000000"; 
    
}
function colorCycleRun(){

 if (iCycle >= iCycleArrayLength){
 
  if (iCycleCount >= iCycleMax){
  
   colorCycleStop();
   
   return;
   
  }
  
  else { 
  
   iCycleCount++; 
   
   iCycle = 0;
   
  }
 } 

// Color the PNG image
// file background.
elemA.style.backgroundColor = aCycle[
 iCycle
];   

// Color the div element.
eColorTest.style.backgroundColor = aCycle[
 iCycle
]; 

// Display the hexadecimal
// color.
eColorTest.innerHTML = "Color:
"+aCycle[iCycle]; // Increase index into // array of colors. iCycle++; }

See More Color Animation Examples

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.