Sunset Color Animation Tutorial
Learn to create natural looking color animation with JavaScript
Introduction
Learn to create natural color animation with JavaScript color cycling. Website development benefits from animated color that smoothly expresses a mood. Blinking animated color sometimes jars the senses.
The Sunset Color Animation Example animates colors behind a semi transparent PNG image file. The colors simulate a sunset or sunrise.
This tutorial explains methods to prepare natural color cycling behind an image. Colors show through semi transparent areas in the image.
Sunset PNG Image
The following graphic includes levels of transparency with a PNG image. Hills in the distance are more transparent than the terrain in the foreground. The following thumbnails demonstrate how much the PNG image changes appearance based on the background color. The same sunset graphic displays below with a blue background, red background, and white background. The animation technique discussed in this tutorial dynamically changes the background color.
Color Cycling
JavaScript color cycling refers to color changes
on background or foreground HTML elements, over time.
The term cycling
indicates re-use of colors. Code interates over
an array of colors.
Sometimes colors from the array display multiple times during
one animation sequence.
This tutorial demonstrates one method to add unique color animation to a Web page.
Color Preparation
Ideally colors change gradually over time with natural animation. Additionally,
both the last and first colors of the cycle should display a
subtle difference in color only.
Any major difference in color between the last and first color
of the array causes a jump
in color between each cycle.
There are many ways to create a range of colors for display during animation. Some applications work best with dynamic color preparation, a manually configured color array, a color generator, or graphic software preparation. The Sunset Color Animation Example applies an array prepared with graphic software preparation, then loops through the array a few times. There are pros and cons to most approaches.
Dynamic Color Preparation
A dynamic color array is an list of colors created when needed with JavaScript within the current application. Code might prepare the array when the Web page loads or in response to user interaction. Dynamic color might also process individual colors as the animation runs, instead of using a predefined array.
Creating numbers on the fly might take less time to download. The JavaScript file itself should be smaller because it doesn't contain an array of color values. However, computations can be expensive. The computer will have to process more operations to create the colors before they display.
If your script runs on mobile devices it's helpful to minimize use of processing power. Not all smart phones can handle many function calls and mathematical operations.
Manually Configured Color Array
Prepare a color array manually with hexadecimal colors and a text editor. Later display the colors with some JavaScript to see how they look. However changing RGB values in JavaScript, then running the animation to see what it looks like can take quite a bit of time.
Color Generator
Perhaps the best option to create gradually changing natural colors is to program a color generator separately, then store the colors in an array. For example, create a JavaScript program which creates color channel values, then saves those values in a file. The generator might gradually change blue, then green, then red values for smooth transitions.
The JavaScript API function Math.sin(), returns values between -1.0 and 1.0.
An array generator could gradually modify values for the red, green, and blue portions of an RGB color array,
based on angular input, and cyclical output from the sin function.
Graphic Software Preparation
The Sunset Color Animation Example
uses a prepared array of colors.
Photoshop was helpful in determining which colors to add to the array.
The Color Picker
dialog allows designers to visually adjust
color channels, then select hexadecimal colors
from the hexadecimal field in the dialog.
Additionally Adobe Illustrator saves gradients to SVG editable text format. Consider creating the gradient visually with Illustrator, save the SVG file, then copy and paste values into JavaScript.
JavaScript
Most examples use a timer to set the amount of time to wait between display of distinct colors from an array. The Sunset Color Animation Example initializes a timer to start the color cycle display. However, it's important to stop the timer when we're done with it.
The short listing below creates a timer which
calls function colorCycleRun() every 64 milliseconds.
timer = setInterval(
function(){
colorCycleRun();
},
64
);
The Sunset Color Animation Example
uses an HTML id to obtain a reference to the image element.
Store a reference to the image because the image's background changes colors over time.
elemA = document.getElementById( 'a' );
Save a variable with the length of the array of colors. The array length prevents overrunning the boundaries of the array during animation. Create an index for iterating over the color array. Create a variable with the maximum number of loops to run the animation. The Sunset Color Animation Example runs through the array three times, then stops. The following short listing prepares a set of variables for use during animation.
// The maximum size of the array: var iCycleArrayLength = new Number( 34 ); // The number of times // to cycle through the array: var iCycleMax = new Number( 3 ); // The index into the array // while displaying the cycle: var iCycle = new Number(0);
Create a function to start color cycling and another function to stop the color cycling.
In the following listing function colorCycleStart() begins
the animation. Function colorCycleStop() ends the animation.
function colorCycleStart(){
// Index during
// animation:
iCycle = 0;
// Animation
// cycle count
// while playing.
iCycleCount = 0;
timer = setInterval(
function(){
colorCycleRun();
},
64
);
}
function colorCycleStop(){
if (timer != null){
clearInterval(
timer
);
timer = null;
}
// Reset the background color
// to it's original color.
elemA.style.backgroundColor = "#111111";
}
Copy Colors Behind the Image
Create a function which copies colors from the array to the image's background.
The following line of code assigns the color at index iCycle
from array aCycle, to the background style of
image reference elemA.
elemA.style.backgroundColor = aCycle[iCycle]
The following listing displays one animation frame.
The timer calls function colorCycleRun() every
sixty four milliseconds.
If the number of cycles through the array is greater than or
equal to iCycleMax, then color animation stops.
Function colorCycleRun() calls
colorCycleStop().
function colorCycleRun(){
if (iCycle > iCycleArrayLength){
if (iCycleCount >= iCycleMax){
colorCycleStop();
return;
}
else {
iCycleCount++;
iCycle = 0;
}
}
iCycle++;
elemA.style.backgroundColor = aCycle[iCycle];
}
HTML
In HTML create an image to display the animated colors.
Give the image an id attribute
and a source file.
<img id="a" onclick="colorCycleStart()" src="sunset.png" alt="Sunset for Color Cycling" />
Add a couple of buttons to manually start or stop the animation.
onclick event handlers activate start and stop functions.
<div> <button onclick="javascript:colorCycleStart()" > Start </button> <button onclick="javascript:colorCycleStop()" > Stop </button> </div>
Tips
Colors for Mood and Surroundings
Select colors that work well with surrounding graphics. The right colors help create a color cycle which fits the animation's mood.
Creativity
The Sunset Color Animation Example applies a semi transparent PNG landscape allowing dynamic color to show through. Much more sophisticated color schemes and graphical combinations could be created such as lightning strikes, storms, or blinking neon signs. Any HTML element, with a background or foreground style property, can receive animated color.
Gradual Color Changes
A longer array with less change between colors provides smoother animation. A timed break between color cycles can provide a natural resting point.
Summary
This tutorial demonstrated one technique to create natural color animation with JavaScript color cycling. Website development benefits from animated color that smoothly expresses a mood. Blinking animated color sometimes jars the senses.
The Sunset Color Animation Example animates colors behind a semi transparent PNG image file. The colors simulate a sunset or sunrise.
This tutorial explained how to prepare colors and implement color cycling behind an image. Colors show through transparent areas in the image.
