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毫秒的大小调整矩形）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

动画stokeRect不透明度画布

1 个答案: