ES6 - Animation

您可以使用JavaScript创建一个复杂的动画，但不限于以下元素和减号;

• Fireworks

• 淡化效果

• 滚入或滚出

• Page-in或Page-out

• 对象移动

在本章中，我们将看到如何使用JavaScript创建动画.

JavaScript可用于根据逻辑方程确定的某种模式在页面周围移动大量DOM元素(< img/>，< div>或任何其他HTML元素)或者函数.

JavaScript提供了以下在动画程序中经常使用的函数.

• setTimeout (功能，持续时间) : 此函数从现在起持续数毫秒后调用该函数.

• setInterval (函数，持续时间) : 此函数在每个持续时间毫秒后调用该函数.

• clearTimeout (setTimeout_variable) : 此函数清除setTimeout()函数设置的任何计时器.

JavaScript还可以设置DOM对象的许多属性，包括在屏幕上的位置.您可以设置对象的顶部和左侧属性，以将其放置在屏幕上的任何位置.以下是相同的语法.

 //设置距离屏幕左边缘的距离.  object.style.left =以像素或点为单位的距离; 或//设置距屏幕上边缘的距离.  object.style.top =以像素或点为单位的距离;

手动动画

因此，让我们使用DOM对象属性和JavaScript函数实现一个简单的动画，如下所示.以下列表包含不同的DOM方法.

• 我们使用的是JavaScript函数 getElementById()获取DOM对象，然后将其分配给全局变量 imgObj .

• 我们已经定义了一个初始化函数 init ()初始化我们已设置其位置和左侧属性的imgObj.

• 我们在窗口加载时调用初始化函数./p>

• 我们正在调用 moveRight()函数将左边距离增加10个像素.您也可以将其设置为负值，将其移至左侧.

示例

尝试以下示例

                                                     
                    
Click button below to move the image to right
                       

Automated Animation

在上面的示例中，我们看到了每次单击时图像如何向右移动。 我们可以使用JavaScript函数setTimeout（）自动执行此过程，如下所示。

这里我们添加了更多方法。 所以，让我们看看这里有什么新东西。

• moveRight（）函数调用setTimeout（）函数来设置imgObj的位置。

• 我们添加了一个新函数stop（）来清除setTimeout（）函数设置的定时器，并将对象设置在其初始位置。

示例

请尝试以下示例代码。

                                                  
                    
Click the buttons below to handle animation
                                   

Rollover with a Mouse Event

这是一个简单的示例，显示了鼠标事件的图像翻转。

让我们看看我们在下面的例子中使用了什么:

• 在加载此页面时，"if"语句检查图像对象是否存在。 如果图像对象不可用，则不会执行此块。

• Image（）构造函数创建并预加载一个名为image1的新图像对象。

• 为src属性分配名为/images/html.gif的外部图像文件的名称。

• 同样，我们在此对象中创建了image2对象并分配了/images/http.gif。

• ＃（哈希标记）禁用链接，以便浏览器在单击时不会尝试转到URL。 此链接是图像。

• 当用户的鼠标移动到链接上时触发onMouseOver事件处理程序，当用户的鼠标离开链接（图像）时触发onMouseOut事件处理程序。

• 当鼠标在图像上移动时，HTTP图像从第一个图像变为第二个图像。 当鼠标远离图像时，将显示原始图像。

• 当鼠标远离链接时，初始图像html.gif将重新出现在屏幕上。

                                                 
Move your mouse over the image to see the result