這篇文章給大家分享的是有關(guān)HTML5中制作動(dòng)態(tài)效果的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、衢江ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的衢江網(wǎng)站制作公司

1.簡介

一個(gè)網(wǎng)站有動(dòng)態(tài)效果會讓網(wǎng)站顯得更加有檔次，會更吸引網(wǎng)友的目光，隨著時(shí)代的發(fā)展和進(jìn)步，越來越多的開發(fā)者開始在前端界面中加入動(dòng)態(tài)效果。

那么我們今天就一起來整理和分享一下前端動(dòng)態(tài)效果的制作方法，并對其中的 Canvas 進(jìn)行一下簡單的講解。

2.動(dòng)態(tài)效果的分類

我們首先先來簡單看一下，動(dòng)態(tài)效果的制作有哪些分類？

3.GIF

首先第一個(gè)就是我們的 gif 圖片，這是一種非常簡單，但卻高效的動(dòng)態(tài)圖制作方式。

GIF圖片擅長于 制作細(xì)節(jié)的小動(dòng)畫 ，位圖，優(yōu)勢在于 “體型”很小，可壓縮，制作成本低，以圖片的形態(tài)適用于各種操作系統(tǒng)，無兼容性的后顧之憂。制作GIF動(dòng)畫的方式有很多，例如我們所熟悉的Photoshop時(shí)間軸，或是利用Flash，AE將動(dòng)畫導(dǎo)出存成GIF格式等等。

GIF動(dòng)畫最常在H5動(dòng)效里當(dāng)擔(dān)loading導(dǎo)航條，熱門小標(biāo)簽等元素，要把控圖片大小和精度之間的平衡，所以它一般用于制作小細(xì)節(jié)的動(dòng)畫。

H5頁面承載GIF圖片的方式相對以下要介紹的其他方法，是最省成本，最為簡便的。只需要以背景圖片/內(nèi)容圖片的形式在頁面上進(jìn)行引用即可。

4.逐幀動(dòng)畫

有很多朋友讀到這里，可能會覺得，逐幀動(dòng)畫跟 GIF 不應(yīng)該是一樣的么？

逐幀動(dòng)畫即是利用一張等間距的動(dòng)畫分解逐幀圖片，一般是由 js腳本模擬編寫 。

逐幀動(dòng)畫和GIF動(dòng)畫的差別在于， 腳本可以控制逐幀動(dòng)畫的快慢和動(dòng)作的暫停，而GIF動(dòng)畫無法在后期通過代碼進(jìn)行動(dòng)畫速率及透明度的修改 。

做一個(gè)逐幀動(dòng)畫必不可缺的就是需要一張等間距的“動(dòng)畫分解逐幀圖片.png”，之后我們就可以通過修改 background-position 來完成一個(gè)“逐幀動(dòng)畫”。

當(dāng)然我們也可以通過設(shè)置特殊的圖片，來完成一些特殊的效果。

5.CSS3 動(dòng)畫

CSS3應(yīng)該是動(dòng)畫家族里絕對不會被遺忘的一名成員。這里我們定義它為 擅長于平面層的動(dòng)畫。CSS3的缺陷應(yīng)該在于它的部分屬性還沒有被瀏覽器有好的支持。

關(guān)于動(dòng)畫的應(yīng)用和基礎(chǔ)屬性介紹在之前也已經(jīng)介紹過了，如果小伙伴們忘記了，可以點(diǎn)擊下面的鏈接去從新溫習(xí)一下。

這里說個(gè)題外話， 如何高質(zhì)高效把動(dòng)畫設(shè)計(jì)傳達(dá)給工程師呢？

Tips：建議使用 "案例Demo或者分鏡頭腳本+動(dòng)畫屬性分解表+素材切圖"的套裝 ！

以下圖為例：這是一個(gè)點(diǎn)擊反饋的小動(dòng)畫，在無法提供Demo的時(shí)候，我們可以使用"動(dòng)畫屬性分解表"的方式。

動(dòng)畫屬性分解表可以讓工程師根據(jù)表格內(nèi)填寫的數(shù)值進(jìn)行動(dòng)畫的編寫，會比憑空的和工程師進(jìn)行交流傳達(dá)，來的更精準(zhǔn)一些。

6.SVG

SVG，也是動(dòng)效制作中不可忽略的一大熱門方法，我們定義它為擅長于線條的動(dòng)畫，弊端是：IE8,Android4.2及以下支持不好。

看下圖幾個(gè)例子，涉及到這種沿著元素描邊的動(dòng)畫，一般都是出自SVG之手啦，當(dāng)然，它也可以實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫，類似這個(gè)表情圖片，不過實(shí)現(xiàn)成本是不太劃算的。

知識普及：SVG，可縮放矢量圖形（Scalable Vector Graphics）**， 是被存成了 XML 格式的圖像，它有一些特別的地方：

可被多種工具讀取和修改（比如記事本）

尺寸更小，可壓縮性更強(qiáng)

矢量

純粹的 XML

一張SVG圖，其實(shí)是由一堆的定位錨點(diǎn)連線生成的。所以它可以很方便的存為文檔格式。而頁面中的引用，也是簡單的將此文本引入即可。

這里必須要注意的點(diǎn)是：如果你想制作一個(gè)SVG動(dòng)畫，請一定要使用AI工具繪制輸出矢量圖給到工程師同學(xué)哦。

如果大家有興趣繼續(xù)深入了解，可以點(diǎn)擊下面的鏈接，這是我之前寫的小教程，教大家如何通過 SVG 畫出一只小狐貍。

7.Canvas

HTML5 的新元素 <canvas>，類似畫板，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

本身是沒有繪圖能力的。所有的繪制工作必須依賴 JavaScript 完成。

我們定義它為**擅長于繪畫的動(dòng)畫。

繪制一個(gè)大量元素下落的動(dòng)畫效果，就是Canvas所擅長的。

Canvas可以算是SVG的堂兄弟，大部分的圖表動(dòng)畫，都是由Canvas或是SVG制作而成的，二者的動(dòng)畫能力相似但也有以下這些區(qū)別：

canvas是畫框，有自己固定的高寬，svg是不依賴分辨率的矢量，可以任意放大縮小。

canvas能以.jpg的格式保存圖像，svg是文本的格式保存圖像

canvas繪制的圖像不占DOM，而svg的每個(gè)圖像都是1個(gè)DOM元素

canvas適合圖像密集型的動(dòng)畫，而svg不適合大量使用，例如制作飄雪等

canvas完全依賴腳本繪制作，而svg可直接使用矢量轉(zhuǎn)存生成。

8.Flash To Canvas

除去上面幾種常見的手法，F(xiàn)lash轉(zhuǎn)Canvas的方法也是今年特別火爆的一種形式。

既然提到曾經(jīng)輝煌的Flash，那產(chǎn)出物必須離不開炫酷這個(gè)形容詞：通過Flash cc制作復(fù)雜又精細(xì)的動(dòng)畫，導(dǎo)成Canvas文件，動(dòng)畫中的交互操作，依賴Create.js的腳步庫完成。

因?yàn)?flash 轉(zhuǎn) Canvas 的實(shí)現(xiàn)成本實(shí)際上非常高，在這里也就不做更多的介紹了。

9.Video

video 作為 HTML 5 的新標(biāo)簽，有著許多非常強(qiáng)大的功能。

但是與之相對應(yīng)的，它也因?yàn)榧嫒菪缘膯栴}，存在了各種制約，但是無可否認(rèn)，Video 在實(shí)現(xiàn)動(dòng)態(tài)效果的方式和成本上，是其他方式無可比擬的。

10.JavaScript

其實(shí)，只要是涉及到交互反饋的動(dòng)畫，小至滾屏翻頁，大到重力感應(yīng)等都需要js進(jìn)行處理腳步的編寫。

也就是說，所有的動(dòng)畫特效都離不開Javascript同學(xué)的支持。

市面上有很多特別的Javascript腳本庫，例如 three.js ，細(xì)細(xì)運(yùn)用，就可以做出非同凡響的動(dòng)畫效果。

總結(jié)：

不同的 方式能做出不同的動(dòng)態(tài)效果，希望以上HTML 5 的動(dòng)態(tài)效果制作方法能讓你制作出更好的頁面。

感謝各位的閱讀！關(guān)于“HTML5中制作動(dòng)態(tài)效果的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞標(biāo)題：HTML5中制作動(dòng)態(tài)效果的示例分析-創(chuàng)新互聯(lián)
瀏覽地址：http://chinadenli.net/article44/dicpee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、小程序開發(fā)、網(wǎng)站改版、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)