Minified - Playing with Gradients

Minified Example - Shows how to use animate() to manipulate the animation indirectly. Also shows loop().

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div id="block">
</div>
(warning, requires relatively modern browser <br>with gradient support)

CSS

#block { width: 300px; height: 300px; border: 1px solid black; }

JavaScript

var MINI = require('minified'), $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
	var GRADIENT_PREFIX = ['', '-moz-', '-ms-', '-webkit-'];
	var COLOR_DURATION = 2000;
	var COLORS = ['#f00', '#0f0', '#00f', '#0ff', '#f0f', '#ff0'];
	var CLEN = COLORS.length;
	var moving = findColor(), prev = findColor(), next = findColor();
	var state = {
        percentage: 0, 
        preColor: COLORS[moving], 
        postColor: COLORS[next], 
        running: false};
	var targets = $('#block');
	var stopFunc;
	
	function findColor() {
		var c = Math.max(0, 
                         Math.min(Math.round(Math.random() * CLEN - 0.5),
                                  CLEN));
		return c != moving ? c : findColor();
	}

	function stepFade() {
		state.running = true;
		$(state).animate({
            percentage: 100, 
            preColor: COLORS[prev], 
            postColor: COLORS[moving]
        }, COLOR_DURATION, 1)
        .then(function() {
           	state.percentage = 0;
	       	state.running = false;
	       	next = moving;
	      	moving = prev;
	       	prev = findColor();
	    });
	}
		
	$.loop(function(t) {
			if (!state.running)
				stepFade();
			
			var deg = Math.round(t / 360 * 100)/100;
			var gradientString = 'linear-gradient('+deg+'deg, ' +
                state.preColor + ' 0%, '+
				COLORS[moving]+ ' ' +
                Math.round(100*state.percentage)/100+'%, '+
				state.postColor + ' 100%); ';
			var bgColor = '';
			$(GRADIENT_PREFIX).each(function(p) {
				bgColor += 'background: ' + p + gradientString;
			});
			targets.set('$$', bgColor);
	});
});