根据提供的百分比值用颜色增长方形 div

Question

我正在制作方形图形动画。正方形应该轻松地从 x/y 轴（左上角）上的零增长到其确定的百分比大小。任何人都可以为我提供任何提示来实现这一点吗？这是我到目前为止所拥有的：http://jsfiddle.net/2n6kduL4/3/

进展是从左到右发生的。但它必须从左上角填充到右下角。

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);
}

Answer 1

您可以使用

Penner 的缓动函数和requestAnimationFrame计时循环来实现动画 + 缓动条形图

方法如下：

在 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);

然后，您可以使用 Penner 的缓动方程将每个条形动画化为其结束宽度。以下是许多以javascript函数表示的Penner缓动算法中的一些。您要做的是输入当前经过的时间、开始值、总持续时间和缓和期间所需的总值变化。Penner 函数根据当前时间返回当前（缓动）值。

// 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);},
}

这是示例代码和演示

该代码创建一个可重用的"动画类"，可用于在动画持续时间内缓解您在上面创建的条形图对象的属性值：

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<animations.length;i++){ animations[i].run(); }
}
function animate(time){
  // animate property values
  for(var i=0;i<animations.length;i++){
    var animation=animations[i];
    if(animation.isAnimating){animation.animate(time);}
  }
  // redraw all bars with their newly animated properties
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<bars.length;i++){
    var bar=bars[i];
    ctx.fillStyle=bar.fill;
    ctx.fillRect(bar.x,bar.y,bar.width,bar.height);
  }
  // request another animation loop
  requestAnimationFrame(animate);
}
$('#rerun').click(function(){ doAllAnimations(); });

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Animate with easeOutQuint easing</h4>
<button id=rerun>Rerun</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>