HTML5 并不是一個(gè)新現(xiàn)象，但 HTML5 的使用在過(guò)去幾年中飛速發(fā)展。當(dāng)涉及到富媒體、動(dòng)態(tài)圖形和網(wǎng)絡(luò)上的交互式內(nèi)容時(shí)，HTML5 幾乎完全取代了 Flash 的使用。它也被移動(dòng)應(yīng)用程序開發(fā)人員大量采用，因?yàn)樗阅芎谩⒁子谑褂们曳祥_放標(biāo)準(zhǔn)。那么，怎樣用H5創(chuàng)建動(dòng)畫呢？動(dòng)力節(jié)點(diǎn)小編來(lái)告訴大家。

創(chuàng)建簡(jiǎn)單的 HTML5 動(dòng)畫

要?jiǎng)?chuàng)建動(dòng)畫，您需要文檔中的形狀、圖像、音頻、視頻以及按照您想要的方式控制和操作所有這些的機(jī)制。

可以使用 HTML5 方法繪制形狀，同時(shí)可以通過(guò)引用將圖像、音頻、視頻等導(dǎo)入到文檔中?？梢酝ㄟ^(guò) Canvas API、CSS3 元素中可用的直接方法或使用自定義 JavaScript 函數(shù)來(lái)實(shí)現(xiàn)控制。

讓我們看一下畫布的設(shè)置，這是一個(gè)簡(jiǎn)單的四步過(guò)程——

第一步是清除整個(gè)畫布，這樣你就可以得到一張白紙。您可以使用 clearRect() 方法來(lái)做到這一點(diǎn)。第二步是保存畫布狀態(tài)，這很重要，因?yàn)樵谶M(jìn)行更改等之后，您會(huì)想要回到原始狀態(tài)。

第三步是很好的部分，在這里您將繪制動(dòng)畫形狀并為動(dòng)畫創(chuàng)建幀。

第四步是保存幀狀態(tài)，循環(huán)繼續(xù)——你回到原來(lái)的狀態(tài)，畫下一幀并保存。

通過(guò)直接使用 rect()、fillRect()、fillStyle() 和 drawImage() 等畫布方法或通過(guò)創(chuàng)建和調(diào)用自定義 JavaScript 函數(shù)來(lái)繪制形狀。就像我之前說(shuō)的，圖像、音頻和視頻可以通過(guò)使用許多其他方法在空間和時(shí)間中包含和定位，以便您擁有創(chuàng)建動(dòng)畫所需的一切。

對(duì)于動(dòng)畫，我們需要調(diào)用畫布狀態(tài)(繪制期間保存)并在一段時(shí)間內(nèi)渲染不同的幀，為此，有三個(gè) JavaScript 函數(shù)，即 window.setInterval()、window.setTimeout() 和 window .requestAnimationFrame()。還有其他方法，但我們現(xiàn)在將保持我們的馬匹。查看Mozilla 開發(fā)人員了解如何使用各種方法在畫布中繪制和動(dòng)畫的基礎(chǔ)知識(shí)。

您還可以查看循環(huán)動(dòng)畫 查看 HTML5 動(dòng)畫以及代碼的實(shí)際效果，以便更好地理解基礎(chǔ)知識(shí)。如果想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的HTML教程，里面的課程內(nèi)容更加豐富細(xì)致，很適合沒(méi)有基礎(chǔ)的小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助。