Анимация stokeRect непрозрачность холст

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мс (для размещения вашего 400ms изменения размера прямоугольника):

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>