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

HTML5動(dòng)畫(huà)包含在<canvas> </ canvas>元素中。為了一個(gè)基本的了解，html文檔中的canvas可以被看作是一個(gè)繪圖板，您可以在其中繪制形狀，然后快速更改框架，使其看起來(lái)像一個(gè)動(dòng)畫(huà)圖形，基本動(dòng)畫(huà)的步驟非常簡(jiǎn)單，您可以通過(guò)在HTML5，CSS和JavaScript中手動(dòng)編寫(xiě)代碼來(lái)創(chuàng)建基本動(dòng)畫(huà)。復(fù)雜的動(dòng)畫(huà)可以通過(guò)使用HTML5動(dòng)畫(huà)工具來(lái)實(shí)現(xiàn)，該工具提供拖放功能來(lái)創(chuàng)建HTML5形狀，還可以添加動(dòng)畫(huà)和交互。這些工具通常會(huì)生成人類(lèi)可讀的代碼，如果需要，可以進(jìn)行修改，當(dāng)然，代碼可以包含在HTML文檔中，也可以在手機(jī)，PC，平板電腦和智能電視上運(yùn)行。其中一些工具包括Bannersnack，Mugeda，GSAP，saola Animatron，Edge Animate，HTML5 Maker和Tumult Hype等名稱(chēng)。

讓我們來(lái)看一下非�；�本的動(dòng)畫(huà)的解剖（只是為了得到它的懸念），我們將看看用于使用HTML5創(chuàng)建動(dòng)畫(huà)的各種工具。

用saola創(chuàng)建簡(jiǎn)單的HTML5動(dòng)畫(huà)圖一

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

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

可以使用HTML5方法繪制形狀，而圖像，音頻，視頻等可以通過(guò)引用導(dǎo)入文檔。控件可以通過(guò)Canvas API，CSS3元素中的直接方法或使用自定義JavaScript函數(shù)進(jìn)行。

用saola創(chuàng)建簡(jiǎn)單的HTML5動(dòng)畫(huà)圖二

我們來(lái)看看畫(huà)布的設(shè)置，這是一個(gè)簡(jiǎn)單的四步過(guò)程 -

第一步是清除整個(gè)畫(huà)布，讓你得到一個(gè)空白的畫(huà)面。您可以使用clearRect（）方法來(lái)執(zhí)行此操作。第二步是保存畫(huà)布狀態(tài)，這很重要，因?yàn)樵谶M(jìn)行了更改之后，你會(huì)想回到原始狀態(tài)。

第三步是很好的部分，您將在此繪制動(dòng)畫(huà)形狀并為動(dòng)畫(huà)創(chuàng)建框架。第四步是保存幀狀態(tài)，循環(huán)繼續(xù) - 返回原始狀態(tài)，畫(huà)出下一幀并保存。

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

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

您還可以查看循環(huán)動(dòng)畫(huà)和動(dòng)畫(huà)太陽(yáng)系，以查看HTML5動(dòng)畫(huà)以及代碼，以便更好地了解基礎(chǔ)知識(shí)。

用saola創(chuàng)建簡(jiǎn)單的HTML5動(dòng)畫(huà)圖三

如果你想看一些最先進(jìn)的HTML5互動(dòng)動(dòng)畫(huà)，那么看看游戲中的免費(fèi)騎士和這個(gè)令人興奮的HTML5破壞視頻。

以上就是用saola創(chuàng)建簡(jiǎn)單的HTML5動(dòng)畫(huà)