詳細教你微信公眾號正文頁SVG交互開發(fā)技巧

現(xiàn)在很多公眾號都直接在正文頁通過SVG交互動畫增加文章的閱讀交互體驗，而不再跳轉(zhuǎn)H5。結(jié)合這一需求，本期分享的內(nèi)容是如何開發(fā)交互式SVG，并嵌入微信公眾號正文頁。設(shè)計師和前端開發(fā)同學(xué)都可以來學(xué)習(xí)下。學(xué)會了可以接這方面的私活了，短平快地賺小錢錢。

先看下最終SVG交互效果：

(體驗公眾號正文頁實際效果，請到本文底部掃碼關(guān)注公眾號)

1 為什么公眾號需要交互SVG

技術(shù)要有落地的應(yīng)用場景才能發(fā)揮實效。為什么很多公眾號開始做SVG交互而放棄H5呢？

主要原因有兩點：

1. H5制作成本高，需要一定的開發(fā)周期和服務(wù)器支撐。
2. 從正文頁跳轉(zhuǎn)H5頁面多了一個步驟，容易造成用戶流失。

當(dāng)然，對于需要復(fù)雜交互，或者更多功能的話，還是需要單獨開發(fā)H5。

SVG雖然只能實現(xiàn)簡單的交互，但既能增加交互體驗又不會太分散用戶對內(nèi)容的關(guān)注點，在很多場景下還是很有需求的。

2 應(yīng)用場景

SVG交互本質(zhì)還是基于SVG SMIL animation，配合SVG的click事件，實現(xiàn)非常簡單的交互。

雖然實現(xiàn)的效果很有限，但還是有很多發(fā)揮空間的，比如以下應(yīng)用場景：

• 【汽車宣傳】點擊車子后，車子移動，經(jīng)過某個位置顯示某個特性或地點名稱文案。
• 【心理測試】點擊某個選項后，出現(xiàn)選擇結(jié)果。
• 【拆紅包】一層一層拆掉紅包，顯示最里面內(nèi)容。
• 【密碼解鎖】點擊指定的幾個數(shù)字后，顯示解鎖內(nèi)容。
• 【猜燈謎】點擊后顯示內(nèi)容，類似翻牌。

下面開始講解本期Demo的制作全過程。

3 素材制作

3.1 背景圖片

使用PS等軟件設(shè)計SVG的背景圖，建議寬度為640px~750px，也可以更高，但文件大小也會增加。 本例制作了 640px x 800px 的jpg背景圖：

3.2 SVG素材

可以去阿里巴巴矢量圖庫(www.iconfont.cn/)網(wǎng)站下載。也可以自行使用AI制作。 但需要注意控制好SVG的圖片尺寸。SVG的圖片的尺寸即點擊區(qū)域，所以控制好圖片中空余的留白區(qū)域。

本Demo從阿里矢量庫中下載了爆竹SVG，下載后用AI打開，縮小圖片的尺寸：

3.3 導(dǎo)出SVG

由于微信編輯器不允許嵌入 <style><script> 標簽，所以通過AI導(dǎo)出SVG的時候要進行一下設(shè)置：

把Styling選擇為Presentation Attributes，這樣導(dǎo)出的SVG就不含有 <style> ，而且元素的樣式也會通過標簽屬性進行設(shè)置，而不使用style內(nèi)聯(lián)css。

4 構(gòu)建SVG

4.1 SVG基本結(jié)構(gòu)

<svg  version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>

這里的style均為基礎(chǔ)的CSS，就不再詳述了。

主要說下viewBox屬性：

viewBox="x, y, width, height"

x、y 控制SVG內(nèi)所有元素的位移（不影響SVG的背景圖）。

width、height 并不是SVG的實際寬高，而是SVG內(nèi)的“分辨率”。width、height越大，SVG內(nèi)的元素越小，反之，元素則越大（不影響SVG的背景圖）。

建議viewBox的x、y設(shè)置為0，width、height設(shè)置為背景圖的尺寸。

4.2 放入文字

先使用 <text> 加入文字：

<svg  version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+    <text x="200" y="540" fill="#fff" >點擊爆竹放飛夢想</text>
  </svg>

通過調(diào)整x、y把位置調(diào)好，fill為文字顏色，style設(shè)置字號。

4.3 加入文字動效

現(xiàn)在實現(xiàn)文字的閃爍效果。這里需要使用 <animate> 和 <g> 標簽。

 <svg  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" >點擊爆竹放飛夢想</text>
+    </g>
  </svg>

介紹下 <animate> ：

attributeName ，為動畫控制的屬性，這里為opacity透明度。

begin ，為動畫開始時間，可以理解為延遲時間。0s表示立即開始動畫。也可以是分號分隔的一組值，例如beigin="3s;5s"，表示的是3s之后動畫開始，6s時候動畫再重新開始（如果之前動畫沒走完，會立即停止從頭開始）。

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

values ，表示attributeName指定屬性的值變化,可以是一個值，也可以是用分號分隔的多個值，這里的"1;0;1"表示“不透明->透明->不透明”，即閃爍效果。

repeatCount ，表示動畫重復(fù)次數(shù)，indefinite=無數(shù)次

<g> 標簽很簡單，就是把包起來的元素打成組合，這樣animate就只針對 <g> 內(nèi)的元素執(zhí)行動畫了。

效果如下：

4.4 從SVG提取爆竹代碼

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

4.5 加入爆竹

加入爆竹代碼，使用 進行包裹，然后通過調(diào)節(jié) 的translate調(diào)節(jié)位置。

<svg  version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代碼（略）
      </g>
+      <g >
+        <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，把文字轉(zhuǎn)化為矢量。然后按照3.3章節(jié)導(dǎo)出SVG。

4.7 加入愿望牌

愿望牌是在爆竹升天后顯示的，實際上是蓋在了爆竹前面，爆竹并沒有消失。所以愿望牌的代碼應(yīng)該寫在爆竹代碼的后面。從SVG提取愿望牌代碼參照4.4章節(jié)，并調(diào)節(jié)位置，加入后的代碼如下：

 <svg  version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代碼（略）
      </g>
      <g >
        爆竹矢量代碼（略）
      </g>
+      <g >
+        愿望牌矢量代碼（略）
+      </g>
  </svg>

效果如下，愿望牌完全擋住了爆竹：

4.8 設(shè)置愿望牌初始屬性

由于愿望牌初始狀態(tài)未不可見，所以將opacity設(shè)為0。

 <svg  version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
      <g>
        文字代碼（略）
      </g>
      <g >
        爆竹矢量代碼（略）
      </g>
M      <g >
        愿望牌矢量代碼（略）
      </g>
  </svg>

5 SVG點擊交互

5.1 爆竹升天

我們要實現(xiàn)的是通過“一次點擊”，爆竹上天，然后愿望牌出現(xiàn)。爆竹和愿望牌要打成組。

接下來，使用 實現(xiàn)click觸發(fā)動畫。

 <svg  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 >
          爆竹矢量代碼（略）
        </g>
        <g >
          愿望牌矢量代碼（略）
        </g>
+      </g>
  </svg>

關(guān)鍵屬性講解：

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

fill ，動畫間隙的填充方式。支持參數(shù)有：freeze、remove。remove是默認值，表示動畫結(jié)束直接回到開始的地方。freeze表示動畫維持結(jié)束后的狀態(tài)。

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

begin ，延遲時間，上面已講過，這里補充下click，表示點擊后立即觸發(fā)， click+2表示點擊后2秒觸發(fā)。

現(xiàn)在我們已經(jīng)實現(xiàn)了點擊爆竹后升天的效果，但是愿望牌還處于不可見狀態(tài)。這里就用到“click+時間”的玩法。

5.2 愿望牌顯示

在愿望牌的 內(nèi)加入，由于爆竹升天動畫是0.5s，所以click+0.5正好是爆竹動畫結(jié)束后顯示愿望牌。

  <svg  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 >
          爆竹矢量代碼（略）
        </g>
        <g >
+          <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
          愿望牌矢量代碼（略）
        </g>
      </g>
  </svg>

※注：請注意設(shè)置begin=click的元素和設(shè)置begin=click+0.5的元素的層級關(guān)系。首先，click元素和click+0.5元素要處于同一個 <g> 內(nèi)；其次，click+0.5元素層級要比click元素的層級更深，所以能夠正確的對應(yīng)同一個click事件。

5.3 完成剩余爆竹

剩下兩個爆竹，只需按照以上步驟，替換愿望牌的圖片，然后調(diào)整元素位置即可，不再贅述。

6 導(dǎo)入微信公眾號

6.1 上傳背景圖素材

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

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

6.2 導(dǎo)入微信文章正文

新建圖文消息，先輸入好標題、作者，上傳好封面圖。 然后在正文區(qū)域輸入兩行文字（微信要求正文必須含有文字）。

打開chrome調(diào)試工具，定位到第二行文字：

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

替換為我們的SVG代碼：

然后隨便點擊下其他元素的代碼，有時可能會自動撤銷，如果出現(xiàn)這種情況，再重新粘貼一次就行。

完成后，就可以發(fā)布預(yù)覽啦。

6.3 注意事項

微信編輯器有很多默認的“潛規(guī)則”，可能會拒絕我們嵌入的代碼，如果被拒，我們嵌入的代碼將會被刪除或者替換成其他的標簽。這里列出我摸索出來的“潛規(guī)則”。

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

后續(xù)有新的發(fā)現(xiàn)會繼續(xù)更新。

6.4 奇葩BUG及技巧經(jīng)驗

微信Android客戶端的公眾號正文頁里點擊元素，進行移動動畫后，元素可能會出現(xiàn)奇怪的邊框。需要給涉及到的元素的 <g> 設(shè)置，包括 <g> 內(nèi)的所有子 <g> 。

SVG圖片的圓心

在用AI設(shè)計SVG的時候，最好把元素的圓心設(shè)置在SVG的中點，否則在實現(xiàn)rotate動畫時，圓心偏離將導(dǎo)致元素旋轉(zhuǎn)出現(xiàn)問題。雖然可以通過from和to的后面兩個參數(shù)調(diào)節(jié)圓心位置，但是非常難手動找到精確的位置。

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

6.5 參考文獻

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

https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

SVG參考

https://www.runoob.com/svg/svg-reference.html

6.6 完整HTML代碼

請前往我的github查看: https://github.com/Yuezi32/weixin_svg_demo

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。