98 lines
5.0 KiB
JavaScript
98 lines
5.0 KiB
JavaScript
//Array prototype to divide each number of array by the given float in parameter.
|
|
Array.prototype.findSpeed= function(time) {
|
|
'use strict';
|
|
|
|
//Initializing Variables
|
|
var i=0, len= this.length;
|
|
var speedArray= [];
|
|
//Loop through the arr
|
|
for(i=0; i<len; i++) {
|
|
//Find ith element divided by time
|
|
var el= parseFloat(this[i])/parseFloat(time);
|
|
//Push the el in the speedArray
|
|
speedArray.push(el);
|
|
}
|
|
//return speedArray
|
|
return speedArray;
|
|
}
|
|
|
|
//Array prototype subTractMyself. This function subtract numbers in array with the given number from array given in parameter.
|
|
Array.prototype.subTractMyself= function(arr1) {
|
|
'use strict';
|
|
|
|
//Initializing Variables
|
|
var i=0, len= this.length;
|
|
var opArray= [];
|
|
//Loop through the arr
|
|
for(i=0; i<len; i++) {
|
|
//Subtract the ith element of both Array
|
|
var el= parseFloat(this[i])-parseFloat(arr1[i]);
|
|
//Push the el in the opArray
|
|
opArray.push(el);
|
|
}
|
|
//return opArray
|
|
return opArray;
|
|
}
|
|
|
|
//Array prototype addMyself. This function add numbers in array with the given numbers from array given in parameter.
|
|
Array.prototype.addMyself= function(arr1) {
|
|
'use strict';
|
|
|
|
//Initializing Variables
|
|
var i=0, len= this.length;
|
|
var opArray= [];
|
|
//Loop through the arr
|
|
for(i=0; i<len; i++) {
|
|
//Add the ith element of both Array
|
|
var el= parseFloat(this[i])+parseFloat(arr1[i]);
|
|
//Push the el in the opArray
|
|
opArray.push(el);
|
|
}
|
|
//return opArray
|
|
return opArray;
|
|
}
|
|
|
|
//This function creates a gradient color animation to the division background-color property with the given time duration.
|
|
//Params:-
|
|
// domId :- Id of the dom Element
|
|
// initialColorTop :- rgb pattern of starting top gradient color.
|
|
// initialColorBottom :- rgb pattern of starting bottom gradient color.
|
|
// finalColorTop :- rgb pattern of final top gradient color.
|
|
// finalColorBotton :- rgb pattern of final bottom gradient color.
|
|
// duration :- duration over which complete animation should happen(in seconds).
|
|
function colorAnimationTheDiv(domId, initialColorTop, initalColorBottom, finalColorTop, finalColorBottom, duration) {
|
|
'use strict';
|
|
|
|
//Initializing parameters to hold colors form parameters.
|
|
var iColorTop= initialColorTop, iColorBottom= initalColorBottom, fColorTop= finalColorTop, fColorBottom= finalColorBottom;
|
|
//Color the rgb pattern to Java-script Array through regular expressions and storing them in the variables.
|
|
var iColorTopArray= iColorTop.match(/\d+/g), iColorBottomArray= iColorBottom.match(/\d+/g), fColorTopArray= fColorTop.match(/\d+/g), fColorBottomArray= fColorBottom.match(/\d+/g);
|
|
//Find the difference in the values from final to initial rgb values for top and bottom.
|
|
var differenceTopArray= fColorTopArray.subTractMyself(iColorTopArray), differenceBottomArray= fColorBottomArray.subTractMyself(iColorBottomArray);
|
|
//Get expected duration. Multiplied by 25 because setInterval is set at 40. Total number of step over which animation will happen.
|
|
var etaDuration= duration*25;
|
|
//Get speed by which values are to be increased in one step.
|
|
var speedTopArray= differenceTopArray.findSpeed(etaDuration), speedBottomArray= differenceBottomArray.findSpeed(etaDuration);
|
|
//Counter to hold and stop setInterval. If counter is greater than etaDuration stop setInterval.
|
|
var counter=0;
|
|
//Start a setInterval function
|
|
var interVal= setInterval(function() {
|
|
//Linear Gradient Definition
|
|
var linearDefinition = 'linear-gradient(rgba(RED, GREEN, BLUE, OPACITY) 0, rgba(RED2, GREEN2, BLUE2, OPACTIY2))';
|
|
if(counter<=etaDuration) {
|
|
//Add iColorTopArray+ speedTopArray to get new rgb value from that interval.
|
|
iColorTopArray= iColorTopArray.addMyself(speedTopArray);
|
|
//Add iColorBottomArray+ speedBottomArray to get new rgb value from that interval.
|
|
iColorBottomArray= iColorBottomArray.addMyself(speedBottomArray);
|
|
//increase counter
|
|
counter++;
|
|
//Apply background-image css to domElement by replace the colors in linearDefinition string.
|
|
$(domId).css('background-image', linearDefinition.replace(/RED/, Math.ceil(iColorTopArray[0])).replace(/BLUE/, Math.ceil(iColorTopArray[2])).replace(/GREEN/, Math.ceil(iColorTopArray[1])).replace(/RED2/, Math.ceil(iColorBottomArray[0])).replace(/BLUE2/, Math.ceil(iColorBottomArray[2])).replace(/GREEN2/, Math.ceil(iColorBottomArray[1])).replace(/OPACITY/, 1).replace(/OPACTIY2/, 1));
|
|
} else {
|
|
//Apply background-image css to domElement by replace the colors in linearDefinition string from final color array.
|
|
$(domId).css('background-image', linearDefinition.replace(/RED/, Math.ceil(fColorTopArray[0])).replace(/BLUE/, Math.ceil(fColorTopArray[2])).replace(/GREEN/, Math.ceil(fColorTopArray[1])).replace(/RED2/, Math.ceil(fColorBottomArray[0])).replace(/BLUE2/, Math.ceil(fColorBottomArray[2])).replace(/GREEN2/, Math.ceil(fColorBottomArray[1])).replace(/OPACITY/, 1).replace(/OPACTIY2/, 1));
|
|
//Stop the setInterval function
|
|
clearInterval(interVal);
|
|
}
|
|
},40);
|
|
} |