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不透明畫布

回答

相關問題