jquery - 动画 stokeRect 不透明 Canvas

Question

基本上，我只想为我正在构建的网站淡入动画。

drawRect: function(object) {
    var canvas = _site.vars.canvas;
    var context = canvas.getContext('2d');
    context.globalAlpha = 0.2;
    context.strokeStyle = '#ffffff';
    if (!context.setLineDash) {
        context.setLineDash = function() {}
    }
    context.setLineDash([5, 2]);
    context.strokeRect(object.x, object.y, object.w, object.h);
};

这只是我的插件的方法之一，但这是绘制矩形的主要代码。

我基本上有一个延迟为 0.4 秒的循环，并不断使用新的 x、y、w、h 参数调用此函数。

这一切都很好，但我真的很想为它们添加动画，而不是仅仅让它们出现。

我一直在阅读有关此内容的信息，但我似乎真的找不到任何相关内容。

如果有人能为我指出正确的方向，那就太好了，我正在开发的网站是 here .

Answer 1

这是一个淡出超过 300 毫秒的动画循环(以适应 400 毫秒的调整矩形大小):

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");


var x=50;
var y=50;
var w=100;
var h=75;

var startTime;

requestAnimationFrame(fadeIn);

$("#test").click(function(){
  startTime=null;
  ctx.clearRect(0,0,canvas.width,canvas.height);
  requestAnimationFrame(fadeIn);    
});



function fadeIn(time){
  if(!startTime){startTime=time;}
  var elapsed=time-startTime;
  if(elapsed>300){
    ctx.strokeRect(x,y,w,h);
    return;
  }
  requestAnimationFrame(fadeIn);
  ctx.globalAlpha=elapsed/300/1.50;
  ctx.clearRect(x-2,y-2,w+2,h+2);
  ctx.strokeRect(x,y,w,h);
  ctx.globalAlpha=1.00;
}

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>
<button id="test">Rerun</button><br>
<canvas id="canvas" width=300 height=300></canvas>