Animate stokeRect不透明画布

基本上，我只想淡入一个我正在构建的网站的动画。Animate stokeRect不透明画布

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.4s，并不断用新的x，y，w，h params调用这个函数。

这一切都很好，但我真的很想让它们动起来，而不是让它们出现。

我一直在阅读关于这个，但我真的似乎无法找到任何相关的。

如果有人能指出我的方向会很好，我正在开发的网站是here。

来源

2014-09-30 Shannon Hochkins

这里是一个动画循环，超过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>

来源

2014-09-30 23:13:21 markE

这正是我想要的！ Thankyou :) – 2014-10-01 00:09:05

这将使用这个动画每个框？或者这将动画所有的盒子？ – 2014-10-01 01:35:56

它会灵活地做。按照设计，它处理一个示例矩形。如果你想动画一组rects，然后把每个矩形的x，y，w，h和它的startTime放在一个对象中，然后把所有这些obejects放到一个数组中。处理动画循环中的每个数组元素。干杯! – markE 2014-10-01 01:44:10

Animate stokeRect不透明画布

回答

相关问题