
現在很多公眾號都直接在正文頁通過SVG交互動畫增加文章的閱讀交互體驗,而不再跳轉H5。結合這一需求,本期分享的內容是如何開發交互式SVG,并嵌入微信公眾號正文頁。設計師和前端開發同學都可以來學習下。學會了可以接這方面的私活了,短平快地賺小錢錢。
先看下最終SVG交互效果:
(體驗公眾號正文頁實際效果,請到本文底部掃碼關注公眾號)

1 為什么公眾號需要交互SVG
技術要有落地的應用場景才能發揮實效。為什么很多公眾號開始做SVG交互而放棄H5呢?
主要原因有兩點:
當然,對于需要復雜交互,或者更多功能的話,還是需要單獨開發H5。
SVG雖然只能實現簡單的交互,但既能增加交互體驗又不會太分散用戶對內容的關注點,在很多場景下還是很有需求的。
2 應用場景
SVG交互本質還是基于SVG SMIL animation,配合SVG的click事件,實現非常簡單的交互。
雖然實現的效果很有限,但還是有很多發揮空間的,比如以下應用場景:
【汽車宣傳】點擊車子后,車子移動,經過某個位置顯示某個特性或地點名稱文案。 【心理測試】點擊某個選項后,出現選擇結果。 【拆紅包】一層一層拆掉紅包,顯示最里面內容。 【密碼解鎖】點擊指定的幾個數字后,顯示解鎖內容。 【猜燈謎】點擊后顯示內容,類似翻牌。下面開始講解本期Demo的制作全過程。
3 素材制作
3.1 背景圖片
使用PS等軟件設計SVG的背景圖,建議寬度為640px~750px,也可以更高,但文件大小也會增加。 本例制作了 640px x 800px 的jpg背景圖:

3.2 SVG素材
可以去阿里巴巴矢量圖庫(www.iconfont.cn/)網站下載。也可以自行使用AI制作。 但需要注意控制好SVG的圖片尺寸。SVG的圖片的尺寸即點擊區域,所以控制好圖片中空余的留白區域。
本Demo從阿里矢量庫中下載了爆竹SVG,下載后用AI打開,縮小圖片的尺寸:

3.3 導出SVG
由于微信編輯器不允許嵌入 <style><script> 標簽,所以通過AI導出SVG的時候要進行一下設置:
新聞熱點
疑難解答