如何爲一系列html畫布路徑的alpha設置動畫效果？

我正在尋找創建一個簡單的動畫循環使用HTML畫布。每條路徑（或三角形）都是按順序淡入，然後以相同的順序淡出。我已經發現圍繞動畫製作動畫的大量資源，但不能在動畫中連續使用alpha動畫，尤其不能動畫動畫。有任何想法嗎？如何爲一系列html畫布路徑的alpha設置動畫效果？

免責聲明：這是我第一次使用畫布，並且我的JavaScript知識是低劣的。由於我使用的是相同的形狀，因此我將弄清楚如何複製，旋轉和翻譯原始文檔作爲單獨的學習。

更新1：跟蹤我的進度，here is a link to my sandbox。

更新2：我改變了腳本的結構，讓我更好地控制每個路徑。

var elem = document.getElementById('loader'); 

if (elem && elem.getContext) { 

var ctxYellow = elem.getContext('2d'); 
var ctxOrange = elem.getContext('2d'); 
var ctxRed = elem.getContext('2d'); 
var ctxViolet = elem.getContext('2d'); 
var ctxBlue = elem.getContext('2d'); 

// Yellow triangle 
if (ctxYellow) { 
    ctxYellow.fillStyle = '#f5ab1c'; 
    ctxYellow.beginPath(); 
    ctxYellow.moveTo(150, 150); 
    ctxYellow.lineTo(20, 75); 
    ctxYellow.lineTo(150, 0); 
    ctxYellow.lineTo(150, 150); 
    ctxYellow.fill(); 
    ctxYellow.closePath(); 
} 

// Orange triangle 
if (ctxOrange) { 
    ctxOrange.fillStyle = '#f26d23'; 
    ctxOrange.beginPath(); 
    ctxOrange.moveTo(150, 150); 
    ctxOrange.lineTo(150, 0); 
    ctxOrange.lineTo(280, 75); 
    ctxOrange.lineTo(150, 150); 
    ctxOrange.fill(); 
    ctxOrange.closePath(); 
} 

// Red triangle 
if (ctxRed) { 
    ctxRed.fillStyle = '#cd1f44'; 
    ctxRed.beginPath(); 
    ctxRed.moveTo(150, 150); 
    ctxRed.lineTo(280, 75); 
    ctxRed.lineTo(280, 225); 
    ctxRed.lineTo(150, 150); 
    ctxRed.fill(); 
    ctxRed.closePath(); 
} 

// Violet triangle 
if (ctxViolet) { 
    ctxViolet.fillStyle = '#851a54'; 
    ctxViolet.beginPath(); 
    ctxViolet.moveTo(150, 150); 
    ctxViolet.lineTo(280, 225); 
    ctxViolet.lineTo(150, 300); 
    ctxViolet.lineTo(150, 150); 
    ctxViolet.fill(); 
    ctxViolet.closePath(); 
} 

// Blue triangle 
if (ctxBlue) { 
    ctxBlue.fillStyle = '#295a9c'; 
    ctxBlue.beginPath(); 
    ctxBlue.moveTo(150, 150); 
    ctxBlue.lineTo(150, 300); 
    ctxBlue.lineTo(20, 225); 
    ctxBlue.lineTo(150, 150); 
    ctxBlue.fill(); 
    ctxBlue.closePath(); 
} 
}

來源

2012-03-10 Lee Gentry

你試過'保存'/'加載'方法嗎？ – kirilloid 2012-03-10 18:23:45

我沒有。但我不確定爲什麼我想要。 – 2012-03-10 23:25:28

如果你想動畫，沒有其他對象，那麼你會用clearRect足夠。否則，它們可能會有所幫助。 – kirilloid 2012-03-11 07:40:27

OK，我有種上當受騙。我結束了使用jQuery。這就是我想出了：

var elem = document.getElementById('yellow'); 

if (elem && elem.getContext) { 
var ctx = elem.getContext('2d'); 
    ctx.fillStyle = 'rgba(245,171,28,1)'; 
    ctx.beginPath(); 
    ctx.moveTo(150,150); 
    ctx.lineTo(20,75); 
    ctx.lineTo(150,0); 
    ctx.lineTo(150,150); 
    ctx.fill(); 
    ctx.closePath(); 
} 

var elem = document.getElementById('orange'); 

if (elem && elem.getContext) { 
var ctx = elem.getContext('2d'); 
    ctx.fillStyle = 'rgba(242,109,35,1)'; 
    ctx.beginPath(); 
    ctx.moveTo(150,150); 
    ctx.lineTo(150,0); 
    ctx.lineTo(280,75); 
    ctx.lineTo(150,150); 
    ctx.fill(); 
    ctx.closePath(); 
} 

var elem = document.getElementById('red'); 

if (elem && elem.getContext) { 
var ctx = elem.getContext('2d'); 
    ctx.fillStyle = 'rgba(205,31,68,1)'; 
    ctx.beginPath(); 
    ctx.moveTo(150,150); 
    ctx.lineTo(280,75); 
    ctx.lineTo(280,225); 
    ctx.lineTo(150,150); 
    ctx.fill(); 
    ctx.closePath(); 
} 

var elem = document.getElementById('violet'); 

if (elem && elem.getContext) { 
var ctx = elem.getContext('2d'); 
    ctx.fillStyle = 'rgba(133,26,84,1)'; 
    ctx.beginPath(); 
    ctx.moveTo(150,150); 
    ctx.lineTo(280,225); 
    ctx.lineTo(150,300); 
    ctx.lineTo(150,150); 
    ctx.fill(); 
    ctx.closePath(); 
} 

var elem = document.getElementById('blue'); 

if (elem && elem.getContext) { 
var ctx = elem.getContext('2d'); 
    ctx.fillStyle = 'rgba(41,90,156,1)'; 
    ctx.beginPath(); 
    ctx.moveTo(150, 150); 
    ctx.lineTo(150, 300); 
    ctx.lineTo(20, 225); 
    ctx.lineTo(150, 150); 
    ctx.fill(); 
    ctx.closePath(); 
} 

$(function() { 
var timer = null; 

var anim = function() { 
    $.each([yellow, orange, red, violet, blue], function(i, el) { 
     $('.color' + (i + 1)).delay(100 * i).fadeIn(); 
    }); 

    setTimeout(function() { 
     $.each([yellow, orange, red, violet, blue], function(i, el) { 
      $('.color' + (i + 1)).delay(100 * i).fadeOut(); 
     }); 
    }, 1500); 

    if (!timer) { 
     return timer = setInterval(anim, 3000); 
    } else { 
     return; 
    } 
} 

anim(); 

})

我爲每個路徑單獨的畫布，絕對定位它們，並用jQuery動畫他們。感謝您的建議！它有幫助。

更新：我的室友讓我通過一些改進來清理代碼並使其運行更流暢。不過，我仍然無法在Firefox中使用它。

來源

2012-03-12 03:11:37

你是那裏的最愛。第一：你可以不是同一個畫布節點同時有多個上下文！要麼使用堆疊在一起的多個畫布節點，要麼在closePath()之後和beginPath之前更改顏色。這實際上就是你在做什麼，只是你用了5個變量來滿足它。

阿爾法可以用這個動畫效果：

var ctx = elem.getContext('2d'); 
ctx.globalAlpha = 0.4;

再次，喜歡的顏色這可以在動畫製作過程中進行，雖然這將改變總體α值（不知道這是正確的做法）。我建議使用rgba()來代替fillStyle。基本上你需要將顏色定義從hey轉換爲rgb值，然後爲alpha值添加一個從0到1的值。谷歌十六進制生成器的rgba。

PS：檢查出更多的信息W3C規範：http://dev.w3.org/html5/2dcontext/

來源

2012-03-11 07:45:59

如何爲一系列html畫布路徑的alpha設置動畫效果？

回答

相關問題