AnimIt - demo6

The rainbow

by b1ncer

HTML

<script src="https://npmcdn.com/[email protected]/dist/anim-it.js"></script>
<div id="container" class="container"></div>

CSS

.container {
	margin-top: 40px;
	text-align: center;
}

.rainbow-cell {
	width: 2px;
	height: 40px;
	background-color: #ff0000;
	display: inline-block;
}

JavaScript

var container = document.getElementById('container');
var cellLen = 300;
var FRAME_TIME = 16;
var cells = [];
for (var i = 0; i < cellLen; i++) {
	var el = document.createElement('div');
	el.setAttribute('class', 'rainbow-cell');
	container.appendChild(el);
	cells.push(el);
}

/**
 * [r, g, b, a]
 */
function TweenRGBA(from, to) {
	from = from || [0, 0, 0, 1];
	to = to || [0, 0, 0, 1];
	var tween = AnimIt.tweenArray({
		from: from,
		to: to
	});
	return function(progress) {
		var color = tween(progress);
		for (var i = 0, j = 3; i < j; i++) {
			color[i] = parseInt(color[i]);
		}
		return TweenRGBA.output(color);
	};
}

TweenRGBA.output = function(rgbArray) {
	return 'rgba('+rgbArray[0]+','+rgbArray[1]+','+rgbArray[2]+','+rgbArray[3]+')';
}

var red = [255, 0, 0];
var orange = [255, 165, 0];
var yellow = [255, 255, 0];
var green = [0, 255, 0];
var blue = [0, 127, 255];
var indigo = [0, 0, 255];
var violet = [139, 0, 255];
var rainbowColors = [red, orange, yellow, green, blue, indigo, violet];

for (var k = 0; k < 7; k++) {
	rainbowColors[k].push((7 - k)/7);
}

console.log(rainbowColors);

for (var j = 0; j < cellLen; j++) {
	var thenable = Promise.resolve();
	var animation;
	for (var m = 0; m < 6; m++) {
		animation = AnimIt({
			tween: AnimIt.tweenReference({
				target: cells[j].style,
				setter: {
					backgroundColor: TweenRGBA(rainbowColors[m], rainbowColors[m+1])
				}
			}),
			duration: 1000,
			delay: !m ? 7000 / cellLen * j : 0
		});
		thenable = thenable.then(animation);
	}
}