介紹一個PS插件svgArtisan（目前還未有主頁），這個工具可以直接根據(jù)PSD的路徑圖層生成SVG圖形。

創(chuàng)新互聯(lián)是一家專業(yè)提供靈丘企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站設(shè)計、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為靈丘眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

接下來就簡單了，將設(shè)計稿上的路徑圖形用插件生成對應(yīng)的SVG，例如是這樣的：

（注意，其中的foreignObject標(biāo)簽內(nèi)是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標(biāo)簽下的圖片。）

再使用CSS3的animation控制stroke-dashoffset：

效果不難吧！SVG還有各種用途，例如制作ICONFONT等，可以深入挖掘。

想讓頁面更有層次感，不妨讓設(shè)計提供一些碎片元素，例如彩花，星星之類，然后把它們單獨(dú)切出來放畫面前景，使用陀螺儀伴隨著手機(jī)運(yùn)動碎片也跟著運(yùn)動，多么好玩！

這里提供一個工具可以輕松實(shí)現(xiàn)陀螺儀重力效果的：parallax.js

用法簡單，定義一個parallax-obj的父類，把需要動的元素加上layer的類，然后設(shè)置動的范圍data-depth：

（5）背景音樂&音效

H5頁面要炫酷，畫面生動還是不夠的，一定要配合生動的音樂。因此可以主動跟設(shè)計或產(chǎn)品溝通，讓他們可以提供音樂資源，分分鐘導(dǎo)致UV猛漲有木有！

當(dāng)然，有了音樂，前端也不是直接引用的，還是有點(diǎn)要求：

1.音樂不宜過長，30s為佳，而且音樂要加上漸現(xiàn)漸隱效果，方便循環(huán)播放；

2.音樂體積要小，音質(zhì)和流量，在手機(jī)上還是優(yōu)先考慮流量吧。

一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降0它的比特率和聲道來改變體積。

接著，只需要簡單引用：

這里有個問題，IOS是不能自動播放音樂的，一定要觸發(fā)一個用戶交互事件，例如點(diǎn)擊。

但是有一種hack的方法可以讓IOS微信側(cè)頁面自動播放（SAFARI依舊無效）：

通過new一張圖片，監(jiān)聽一張圖片的onload事件，結(jié)束后回調(diào)執(zhí)行音頻播放audio.play()即可，原理估計是動了dom結(jié)構(gòu)，相當(dāng)于執(zhí)行了快速交互。（有人也用過createEvent模擬，原理也是動了dom。）

因此，記得暴露一個音樂關(guān)閉/打開的按鈕，不然肯定被用戶罵死。

Loading頁還是要有的，萬一用戶網(wǎng)速慢呢？

以上做了那么多事，如果沒有資源加載都是玩不來的，因此還需要一個loading的支持。一般情況下頁面體積大于3m則要加上loading頁。

然而loading還是可以做得很有趣的，一般的做法是：

1.引入品牌，例如APP宣傳頁；
2.引入有趣動畫，放一個賤賤的人物跳舞給你看；
3.一切從簡，用CSS3簡單動畫。

較后，給一個例子結(jié)尾吧。

這是空間5.0預(yù)約頁第二版，使用了以上的若干方法論，例如loading動畫，CSS3動畫，SVG星空連線，*屏星球重力感應(yīng)，音樂（這里使用開啟按鈕后播放）等等。

（由于活動已結(jié)束，很多運(yùn)營處都被刪掉從簡了，忽略那些細(xì)節(jié)）

（查看DEMO）

當(dāng)然，真正要做到高效制作動態(tài)H5頁面，還是靠積累，因此平時做好的細(xì)節(jié)動畫自己都積累起來，下次分分鐘就能用得上。

以上內(nèi)容由創(chuàng)新互聯(lián)（成都網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計,成都網(wǎng)站制作）為您提供，更多精彩內(nèi)容：https://www.cdcxhl.com/

關(guān)注“科技”微信公眾號，快速獲取互聯(lián)網(wǎng)較新資訊