HTML5網頁動畫

Question

有沒有人知道如何實現這樣的事情？

http://teamviget.com/#!lift-off

我想要做類似的事情，但我的東西在新的HTML5和所有這些東西

謝謝！

Answer 1

當然可以。首先，你必須繪製背景圖像。並在兩側提供兩個按鈕。點擊這些按鈕可以調用一個函數...它調用一個setInterval（）函數來動畫（在這種情況下，圖像必須淡入淡出並形成一個新圖像）。爲了提供淡化效果，我們有一個受歡迎的參數。 ctx.globalAlpha（）。在每個動畫步驟中更改它的值。 Lemme提供了一個示例代碼，以便您可以正確理解它。

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
var ms = new Image();  
ms.src = "images/asdf.jpg" 
ctx.drawImage(ms,0,0); // Will draw the initial image (assume) 
ctx1 = canvas.getContext("2d"); 

現在讓我來定義onclick函數。

onclick="caller()"; 

應作出的調用函數調用動畫功能

function caller() 
{ 
    i=1; 
    inter=setInterval(animate(),500); // Calls the animate function every 500 msec 
} 

而且動畫功能將低於

function animate() 
{ 
    i=i-0.1; 
    ctx1.globalAlpha=i; 

    if(i=0) 
    { 
     clearInterval(inter); 
     ctx1.drawImage(ms2,0,0); // This will draw the next image defined in ms2. 
    } 
} 

這麼看，如下圖所示將淡出和新圖像在5秒內出現。如果您有多個圖像，請使用數組，並且絕對要使用javascipts可以幫助您以所需的方式實現它們。讓我知道您是否需要對您遇到的特定問題進行更多說明。