詳細(xì)教你微信公眾號(hào)正文頁(yè)SVG交互開(kāi)發(fā)技巧

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

先看下最終SVG交互效果：

(體驗(yàn)公眾號(hào)正文頁(yè)實(shí)際效果，請(qǐng)到本文底部掃碼關(guān)注公眾號(hào))

1 為什么公眾號(hào)需要交互SVG

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

主要原因有兩點(diǎn)：

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

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

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

2 應(yīng)用場(chǎng)景

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

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

下面開(kāi)始講解本期Demo的制作全過(guò)程。

3 素材制作

3.1 背景圖片

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

3.2 SVG素材

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

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

3.3 導(dǎo)出SVG

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

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

4 構(gòu)建SVG

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

<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均為基礎(chǔ)的CSS，就不再詳述了。

主要說(shuō)下viewBox屬性：

viewBox="x, y, width, height"

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

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

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

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">點(diǎn)擊爆竹放飛夢(mèng)想</text>
 </svg>

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

4.3 加入文字動(dòng)效

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

 <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">點(diǎn)擊爆竹放飛夢(mèng)想</text>
+ </g>
 </svg>

介紹下 <animate> ：

attributeName ，為動(dòng)畫控制的屬性，這里為opacity透明度。

begin ，為動(dòng)畫開(kāi)始時(shí)間，可以理解為延遲時(shí)間。0s表示立即開(kāi)始動(dòng)畫。也可以是分號(hào)分隔的一組值，例如beigin="3s;5s"，表示的是3s之后動(dòng)畫開(kāi)始，6s時(shí)候動(dòng)畫再重新開(kāi)始（如果之前動(dòng)畫沒(méi)走完，會(huì)立即停止從頭開(kāi)始）。

dur ，為動(dòng)畫時(shí)間，dur越小，動(dòng)畫越快。

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

repeatCount ，表示動(dòng)畫重復(fù)次數(shù)，indefinite=無(wú)數(shù)次

<g> 標(biāo)簽很簡(jiǎn)單，就是把包起來(lái)的元素打成組合，這樣animate就只針對(duì) <g> 內(nèi)的元素執(zhí)行動(dòng)畫了。

效果如下：

4.4 從SVG提取爆竹代碼

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

4.5 加入爆竹

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

<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

通過(guò)AI制作愿望牌SVG，記得通過(guò)Command+Shift+O，把文字轉(zhuǎn)化為矢量。然后按照3.3章節(jié)導(dǎo)出SVG。

4.7 加入愿望牌

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

 <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 設(shè)置愿望牌初始屬性

由于愿望牌初始狀態(tài)未不可見(jiàn)，所以將opacity設(shè)為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點(diǎn)擊交互

5.1 爆竹升天

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

接下來(lái)，使用 實(shí)現(xiàn)click觸發(fā)動(dòng)畫。

 <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>

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

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

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

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

begin ，延遲時(shí)間，上面已講過(guò)，這里補(bǔ)充下click，表示點(diǎn)擊后立即觸發(fā)， click+2表示點(diǎn)擊后2秒觸發(fā)。

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

5.2 愿望牌顯示

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

 <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>

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

5.3 完成剩余爆竹

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

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

6.1 上傳背景圖素材

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

上傳成功后，打開(kāi)圖片，獲取圖片的線上地址：

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

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

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

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

替換為我們的SVG代碼：

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

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

6.3 注意事項(xiàng)

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

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

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

微信Android客戶端的公眾號(hào)正文頁(yè)里點(diǎn)擊元素，進(jìn)行移動(dòng)動(dòng)畫后，元素可能會(huì)出現(xiàn)奇怪的邊框。需要給涉及到的元素的 <g> 設(shè)置style="outline:none"，包括 <g> 內(nèi)的所有子 <g> 。

SVG圖片的圓心

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

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

6.5 參考文獻(xiàn)

張?chǎng)涡竦牟┛汀冻?jí)強(qiáng)大的SVG SMIL animation動(dòng)畫詳解》

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

SVG參考

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

6.6 完整HTML代碼

請(qǐng)前往我的github查看: https://github.com/Yuezi32/weixin_svg_demo

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com