Crecer div cuadrado con color basado en el valor porcentual proporcionado

Estoy trabajando en una animación de gráfico cuadrado. Los cuadrados deberían crecer fácilmente desde cero en el eje x / y (esquina superior izquierda) hasta su tamaño de porcentaje determinado. ¿Alguien puede darme alguna pista para lograr esto? Esto es lo que tengo hasta ahora: http://jsfiddle.net/2n6kduL4/3/

El progreso está sucediendo de izquierda a derecha. Pero tiene que llenarse desde la esquina superior izquierda hasta la esquina inferior derecha.

var canvas = document.getElementById('myProgress'); var myPerc = 500; ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255, 0, 0)"; //red ctx.fillRect(0, 0, myPerc, 100); ctx.save(); for (var i = 0; i < (myPerc * 0.5); i++) { ctx.fillStyle = "rgb(0, 255, 0)"; //greeen (function(i) { setTimeout(function() { ctx.fillRect(0, 0, +i, 100); }, 1000 * i); })(i); } 

Puede lograr su diagtwig de barras animado + simplificado utilizando las funciones de aceleración de Penner y el requestAnimationFrame tiempo requestAnimationFrame

Así es cómo:

Define cada una de tus barras de barras en objetos javascript:

 // create some bar objects and put them in a bars[] array var bars=[]; var bar1={x:0,y:20,width:1,height:50,fill:'red'}; var bar2={x:0,y:100,width:1,height:50,fill:'green'}; var bar3={x:0,y:180,width:1,height:50,fill:'blue'}; bars.push(bar1,bar2,bar3); 

Luego puede animar cada barra hasta su ancho final usando las ecuaciones de Easing de Penner. Aquí hay algunos de los muchos algoritmos de aceleración de Penner expresados ​​como funciones de JavaScript. Lo que hace es alimentar en el tiempo transcurrido actual, el valor inicial, la duración total del tiempo y el cambio de valor total deseado durante la aceleración. Las funciones de Penner le devuelven el valor actual (facilitado) basado en la hora actual.

 // t: elapsed time inside duration, // b: beginning value, // d: total duration // c: total change from beginning value, var easings={ linear:function(t,b,c,d){return(c*t/d+b);}, easeInQuint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);}, easeOutQuint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);}, } 

Aquí hay un código de ejemplo y una demostración

El código crea una “Clase de animación” reutilizable que se puede usar para facilitar los valores de las propiedades de los objetos de la barra que creó anteriormente durante la duración de la animación:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var Animation=( function(){ // easings // t: elapsed time through duration, // b: beginning value, // d: total duration // c: total change from beginning value, var easings={ linear:function(t,b,c,d){return(c*t/d+b);}, easeInQuint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);}, easeOutQuint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);}, } // function Animation(target,property,endingValue,duration,easing){ this.target=target; this.property=property; this.endingValue=endingValue; this.duration=duration; this.easing=easing; this.beginningValue=target[property]; this.totalChange=endingValue-target[property]; this.startTime=null; this.isAnimating=false; if(easings[this.easing]==undefined){this.easing='linear';} }; // Animation.prototype.animate=function(time){ if(time>this.startTime+this.duration){ this.target[this.property]=this.endingValue; this.isAnimating=false; }else{ this.target[this.property]=easings[this.easing]( time-this.startTime,this.beginningValue,this.totalChange,this.duration ); } }; // Animation.prototype.run=function(){ this.target[this.property]=this.beginningValue; this.startTime=performance.now(); this.isAnimating=true; }; // return(Animation); })(); // create some bar objects and put them in a bars[] array var bars=[]; var bar1={x:0,y:20,width:1,height:50,fill:'red'}; var bar2={x:0,y:100,width:1,height:50,fill:'green'}; var bar3={x:0,y:180,width:1,height:50,fill:'blue'}; bars.push(bar1,bar2,bar3); // create some animations that widen the each bar to the desired // width over 3000ms var animations=[]; var bar1AnimateWidth=new Animation(bar1,'width',150,3000,'easeOutQuint'); var bar2AnimateWidth=new Animation(bar2,'width',85,3000,'easeOutQuint'); var bar3AnimateWidth=new Animation(bar3,'width',250,3000,'easeOutQuint'); animations.push(bar1AnimateWidth,bar2AnimateWidth,bar3AnimateWidth); // start the requestAnimationFrame loop requestAnimationFrame(animate); // initialize each animation object and start each eased animation running doAllAnimations(); function doAllAnimations(){ for(var i=0;i 
 body{ background-color: ivory; } #canvas{border:1px solid red;} 
  

Animate with easeOutQuint easing