詳細教你微信公衆號正文頁SVG交互開發

時間 2019-11-05

標籤詳細微信公衆號正文 svg 交互開發简体版

原文原文鏈接

如今不少公衆號都直接在正文頁經過SVG交互動畫增長文章的閱讀交互體驗，而再也不跳轉H5。結合這一需求，本期分享的內容是如何開發交互式SVG，並嵌入微信公衆號正文頁。設計師和前端開發同窗均可以來學習下。學會了能夠接這方面的私活了，短平快地賺小錢錢。

先看下最終SVG交互效果：css

(體驗公衆號正文頁實際效果，請到本文底部掃碼關注公衆號)html

1 爲何公衆號須要交互SVG

技術要有落地的應用場景才能發揮實效。爲何不少公衆號開始作SVG交互而放棄H5呢？前端

主要緣由有兩點：git

H5製做成本高，須要必定的開發週期和服務器支撐。
從正文頁跳轉H5頁面多了一個步驟，容易形成用戶流失。

固然，對於須要複雜交互，或者更多功能的話，仍是須要單獨開發H5。github

SVG雖然只能實現簡單的交互，但既能增長交互體驗又不會太分散用戶對內容的關注點，在不少場景下仍是頗有需求的。chrome

2 應用場景

SVG交互本質仍是基於SVG SMIL animation，配合SVG的click事件，實現很是簡單的交互。bash

雖然實現的效果頗有限，但仍是有不少發揮空間的，好比如下應用場景：服務器

【汽車宣傳】點擊車子後，車子移動，通過某個位置顯示某個特性或地點名稱文案。
【心理測試】點擊某個選項後，出現選擇結果。
【拆紅包】一層一層拆掉紅包，顯示最裏面內容。
【密碼解鎖】點擊指定的幾個數字後，顯示解鎖內容。
【猜燈謎】點擊後顯示內容，相似翻牌。

下面開始講解本期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的時候要進行一下設置：

把Styling選擇爲Presentation Attributes，這樣導出的SVG就不含有<style>，並且元素的樣式也會經過標籤屬性進行設置，而不使用style內聯css。

4 構建SVG

4.1 SVG基本結構

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>
複製代碼

這裏的style均爲基礎的CSS，就再也不詳述了。

主要說下viewBox屬性：

viewBox="x, y, width, height"

x、y 控制SVG內全部元素的位移（不影響SVG的背景圖）。

width、height 並非SVG的實際寬高，而是SVG內的「分辨率」。width、height越大，SVG內的元素越小，反之，元素則越大（不影響SVG的背景圖）。

建議viewBox的x、y設置爲0，width、height設置爲背景圖的尺寸。

4.2 放入文字

先使用<text>加入文字：

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+       <text x="200" y="540" fill="#fff" style="font-size: 30px">點擊爆竹放飛夢想</text>
    </svg>
複製代碼

經過調整x、y把位置調好，fill爲文字顏色，style設置字號。

4.3 加入文字動效

如今實現文字的閃爍效果。這裏須要使用<animate>和<g>標籤。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+       <g>
+           <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
            <text x="200" y="540" fill="#fff" style="font-size: 30px">點擊爆竹放飛夢想</text>
+       </g>
    </svg>
複製代碼

介紹下<animate>：

attributeName，爲動畫控制的屬性，這裏爲opacity透明度。

begin，爲動畫開始時間，能夠理解爲延遲時間。0s表示當即開始動畫。也能夠是分號分隔的一組值，例如beigin="3s;5s"，表示的是3s以後動畫開始，6s時候動畫再從新開始（若是以前動畫沒走完，會當即中止從頭開始）。

dur，爲動畫時間，dur越小，動畫越快。

values，表示attributeName指定屬性的值變化,能夠是一個值，也能夠是用分號分隔的多個值，這裏的"1;0;1"表示「不透明->透明->不透明」，即閃爍效果。

repeatCount，表示動畫重複次數，indefinite=無數次

<g>標籤很簡單，就是把包起來的元素打成組合，這樣animate就只針對<g>內的元素執行動畫了。

效果以下：

4.4 從SVG提取爆竹代碼

打開AI生成的SVG文件，只取爆竹的矢量路徑代碼：

4.5 加入爆竹

加入爆竹代碼，使用進行包裹，而後經過調節的translate調節位置。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g>
                文字代碼（略）
            </g>
+           <g style="transform: translate(140px, 580px);">
+               <path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />
+               <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />
+               <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+               <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />
+               <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+               <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />
+               <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />
+           </g>
    </svg>
複製代碼

4.6 製做願望牌SVG

經過AI製做願望牌SVG，記得經過Command+Shift+O，把文字轉化爲矢量。而後按照3.3章節導出SVG。

4.7 加入願望牌

願望牌是在爆竹昇天後顯示的，其實是蓋在了爆竹前面，爆竹並無消失。因此願望牌的代碼應該寫在爆竹代碼的後面。從SVG提取願望牌代碼參照4.4章節，並調節位置，加入後的代碼以下：

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g>
                文字代碼（略）
            </g>
            <g style="transform: translate(140px, 580px);">
                爆竹矢量代碼（略）
            </g>
+           <g style="transform: translate(120px, 560px);">
+               願望牌矢量代碼（略）
+           </g>
    </svg>
複製代碼

效果以下，願望牌徹底擋住了爆竹：

4.8 設置願望牌初始屬性

因爲願望牌初始狀態未不可見，因此將opacity設爲0。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g>
                文字代碼（略）
            </g>
            <g style="transform: translate(140px, 580px);">
                爆竹矢量代碼（略）
            </g>
M           <g style="transform: translate(120px, 560px);opacity: 0;">
                願望牌矢量代碼（略）
            </g>
    </svg>
複製代碼

5 SVG點擊交互

5.1 爆竹昇天

咱們要實現的是經過「一次點擊」，爆竹上天，而後願望牌出現。爆竹和願望牌要打成組。

接下來，使用實現click觸發動畫。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g>
                文字代碼（略）
            </g>
+           <g>
+               <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
                <g style="transform: translate(140px, 580px);">
                    爆竹矢量代碼（略）
                </g>
                <g style="transform: translate(120px, 560px);opacity: 0;">
                    願望牌矢量代碼（略）
                </g>
+           </g>
    </svg>
複製代碼

關鍵屬性講解：

type， attributeName="transform"的值，能夠是 translate、scale、rotate、skewX、skewY。

fill，動畫間隙的填充方式。支持參數有：freeze、remove。remove是默認值，表示動畫結束直接回到開始的地方。freeze表示動畫維持結束後的狀態。

restart，支持的參數有always、whenNotActive、never。always是默認值，表示每點一次從新執行動畫；whenNotActive表示動畫正在進行的時候不能重啓動畫；never表示動畫僅執行一次。

begin，延遲時間，上面已講過，這裏補充下click，表示點擊後當即觸發， click+2表示點擊後2秒觸發。

如今咱們已經實現了點擊爆竹後昇天的效果，可是願望牌還處於不可見狀態。這裏就用到「click+時間」的玩法。

5.2 願望牌顯示

在願望牌的內加入，因爲爆竹昇天動畫是0.5s，因此click+0.5正好是爆竹動畫結束後顯示願望牌。

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g>
                文字代碼（略）
            </g>
            <g>
                <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
                <g style="transform: translate(140px, 580px);">
                    爆竹矢量代碼（略）
                </g>
                <g style="transform: translate(120px, 560px);opacity: 0;">
+                   <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
                    願望牌矢量代碼（略）
                </g>
            </g>
    </svg>
複製代碼

※注：請注意設置begin=click的元素和設置begin=click+0.5的元素的層級關係。首先，click元素和click+0.5元素要處於同一個<g>內；其次，click+0.5元素層級要比click元素的層級更深，因此可以正確的對應同一個click事件。

5.3 完成剩餘爆竹

剩下兩個爆竹，只需按照以上步驟，替換願望牌的圖片，而後調整元素位置便可，再也不贅述。

6 導入微信公衆號

6.1 上傳背景圖素材

以上代碼中的背景圖咱們用的是本地的路徑，須要上傳至微信後臺，獲取線上地址。進入微信公衆平臺，點擊左邊的素材管理->圖片->上傳:

上傳成功後，打開圖片，獲取圖片的線上地址：

6.2 導入微信文章正文

新建圖文消息，先輸入好標題、做者，上傳好封面圖。而後在正文區域輸入兩行文字（微信要求正文必須含有文字）。

打開chrome調試工具，定位到第二行文字：

在第二行文字代碼處，右擊鼠標選擇Edit as HTML:

替換爲咱們的SVG代碼：

而後隨便點擊下其餘元素的代碼，有時可能會自動撤銷，若是出現這種狀況，再從新粘貼一次就行。

完成後，就能夠發佈預覽啦。

6.3 注意事項

微信編輯器有不少默認的「潛規則」，可能會拒絕咱們嵌入的代碼，若是被拒，咱們嵌入的代碼將會被刪除或者替換成其餘的標籤。這裏列出我摸索出來的「潛規則」。

標籤裏的background的url()裏，地址不能加引號，單引號雙引號都不行，不然會被微信編輯器過濾掉。
標籤裏不能有id
不能有<style><script><a>標籤。

後續有新的發現會繼續更新。

6.4 奇葩BUG及技巧經驗

微信Android客戶端的公衆號正文頁裏點擊元素，進行移動動畫後，元素可能會出現奇怪的邊框。須要給涉及到的元素的<g>設置style="outline:none"，包括<g>內的全部子<g>。

SVG圖片的圓心

在用AI設計SVG的時候，最好把元素的圓心設置在SVG的中點，不然在實現rotate動畫時，圓心偏離將致使元素旋轉出現問題。雖然能夠經過from和to的後面兩個參數調節圓心位置，可是很是難手動找到精確的位置。

<animateTransform attributeName="transform" type="rotate" from="0 41.5 43" to="360 41.5 43" dur="3s" repeatCount="indefinite">
複製代碼

6.5 參考文獻

張鑫旭的博客《超級強大的SVG SMIL animation動畫詳解》

www.zhangxinxu.com/wordpress/2…

SVG參考

www.runoob.com/svg/svg-ref…

6.6 完整HTML代碼

請前往個人github查看: github.com/Yuezi32/wei…

以上就是本期的分享內容，感謝觀看。及時獲取最新精彩文章，歡迎關注個人我的公衆號^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。