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可以帮助您以所需的方式实现它们。让我知道您是否需要对您遇到的特定问题进行更多说明。