越來(lái)越多的公眾號(hào)在圖文消息中加入了SVG動(dòng)畫(huà)交互效果，SVG支持事件觸發(fā)動(dòng)畫(huà)，相對(duì)于單獨(dú)做一個(gè)H5而言，由于公眾號(hào)消息依托于微信服務(wù)器，為廣告主節(jié)約了服務(wù)器流量成本。這次我們以蘋(píng)果公眾號(hào)的一篇交互消息為例，剖析下里面的效果是怎樣實(shí)現(xiàn)的。

蘋(píng)果公眾號(hào)SVG交互

動(dòng)畫(huà)主要分為兩屏，第一屏出現(xiàn)閃動(dòng)文字提示用戶點(diǎn)擊交互，用戶點(diǎn)擊后第一屏動(dòng)畫(huà)消失接著播放第二屏的gif動(dòng)畫(huà)，最后畫(huà)面停止在產(chǎn)品圖片幀上。

1.首先構(gòu)建第一屏動(dòng)畫(huà)：

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

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>

先來(lái)介紹viewBox屬性

viewBox=”x, y, w, h”

x、y 控制SVG內(nèi)所有元素的相對(duì)位置。w，h用來(lái)控制svg寬高，這里的寬高并不是svg元素的dom尺寸，而是svg的內(nèi)分辨率，受svg的width，height和preserveAspectRatio等屬性值影響。

preserveAspectRatio=”xMinYMin meet”

preserveAspectRatio屬性用來(lái)設(shè)置viewBox的縮放和對(duì)齊方式，xMinYMin meet的意思是，根據(jù)視口的寬高進(jìn)行等比例縮放，這里的視口就是指width和height值組成的矩形區(qū)域。

1.2 加入閃動(dòng)文字

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <text x="340" y="1750" fill="#fff" >>點(diǎn)一下屏幕，有請(qǐng)主角<</text>
</svg>

設(shè)置文字的位置和顏色屬性。

1.3 為文字添加動(dòng)畫(huà)，這里需要用到 <g>和<animate>標(biāo)簽

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
   <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
   <text x="340" y="1750" fill="#fff" >>點(diǎn)一下屏幕，有請(qǐng)主角<</text>
 </g>
</svg>

• animate標(biāo)簽用來(lái)對(duì)元素的某個(gè)屬性進(jìn)行動(dòng)畫(huà)。
• attributeName指定屬性名，這里是透明度opacity。
• begin指定動(dòng)畫(huà)開(kāi)始的時(shí)間，可以是一組用分號(hào)分隔的值。
• dur指定動(dòng)畫(huà)的時(shí)長(zhǎng)，值越小動(dòng)畫(huà)越快，反之亦然。
• values指定attributeName屬性的變化值，可以是單值也可以是分號(hào)分隔的列表。這里的1;0;1指定是透明度在0->1->0之間變換，產(chǎn)生閃爍的效果。
• g標(biāo)簽即group的縮寫(xiě)，用來(lái)對(duì)元素進(jìn)行組合， 這樣animate效果就限制在組內(nèi)。

1.4 加入首屏和動(dòng)畫(huà)圖片

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>點(diǎn)一下屏幕，有請(qǐng)主角<</text>
   </g>
  </g>
 </g>
</svg>

• 這里我們加入了兩組foreignObject對(duì)象用來(lái)顯示封面和gif動(dòng)畫(huà)圖片。
• foreignObject可以理解成一個(gè)svg容器，支持x, y, width, height, transform位移等屬性，這里我們將包含gif動(dòng)畫(huà)圖片的foreignObject位移屬性設(shè)置為 transform=”translate(1080, 0)，使gif動(dòng)畫(huà)沿x軸向右移動(dòng)自身寬度距離，使動(dòng)畫(huà)開(kāi)始隱藏起來(lái)，等待事件觸發(fā)顯示。
• 我們將元素放在不同的分組里，方便后面添加事件。

1.5 加入事件觸發(fā)

<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>
 <g>
  <animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>點(diǎn)一下屏幕，有請(qǐng)主角<</text>
   </g>
  </g>
 </g>
</svg>

• animateTransform用來(lái)對(duì)元素進(jìn)行位移，旋轉(zhuǎn)，斜切等操作。
• transform，可以是 translate、scale、rotate、skewX、skewY 。
• fill，指定動(dòng)畫(huà)間隙的填充方式。支持參數(shù)有：freeze、remove。remove是默認(rèn)值，表示動(dòng)畫(huà)結(jié)束直接回到開(kāi)始的地方。freeze表示動(dòng)畫(huà)維持結(jié)束后的狀態(tài)。
• restart， 支持的參數(shù)有always、whenNotActive、never。always是默認(rèn)值，表示每點(diǎn)一次重新執(zhí)行動(dòng)畫(huà)；whenNotActive表示動(dòng)畫(huà)正在進(jìn)行的時(shí)候不能重啟動(dòng)畫(huà)；never表示動(dòng)畫(huà)僅執(zhí)行一次。
• begin， 延遲時(shí)間已經(jīng)介紹過(guò)，這里補(bǔ)充下click，表示點(diǎn)擊后立即觸發(fā)， click+2表示點(diǎn)擊后2秒觸發(fā)。

<animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>

這段代碼的意思是，鼠標(biāo)點(diǎn)擊后，我們將gif動(dòng)畫(huà)所在組向左移動(dòng)1080距離，使原來(lái)隱藏的動(dòng)畫(huà)暴露出來(lái)，還記得我們開(kāi)始是怎么隱藏gif動(dòng)畫(huà)的么。

<animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>

這里添加了兩組animate動(dòng)畫(huà)，我希望在動(dòng)畫(huà)播放結(jié)束后隱藏當(dāng)前的svg層，這里設(shè)置在點(diǎn)擊事件3.5秒后觸發(fā)，正好是動(dòng)畫(huà)播放的時(shí)間。

2.構(gòu)建第二屏動(dòng)畫(huà)：

第二屏動(dòng)畫(huà)是一張靜態(tài)圖片，用來(lái)顯示gif動(dòng)畫(huà)最后一幀的產(chǎn)品圖，沒(méi)有什么新知識(shí)點(diǎn)，如有疑問(wèn)可以參考本文的源碼。

最后介紹一下兩屏動(dòng)畫(huà)的組織方式，我將每屏動(dòng)畫(huà)放在一個(gè)單獨(dú)的div標(biāo)簽中，并設(shè)置div標(biāo)簽的高度為0，由于svg元素的高度不受父容器高度影響，結(jié)果會(huì)產(chǎn)生類(lèi)似層疊定位效果，就像設(shè)置父容器定位position:absolute一樣。

<div >
 <svg></svg>
</div>
<div >
 <svg></svg>
</div>

這樣我們就可以將多組動(dòng)畫(huà)放在各自的div中，當(dāng)使用animate動(dòng)畫(huà)隱藏了該組svg元素后，下面一層的svg就會(huì)展示出來(lái)等待交互。

3. 插入到公眾號(hào)文章中

我們現(xiàn)在用到的圖片都在本地，首先需要將用到的圖片上傳到公眾號(hào)素材庫(kù)中，提取url地址并替換掉本地圖片地址。

因?yàn)楣娞?hào)圖文編輯器本身并不支持代碼編輯，我們需要借助chrome開(kāi)發(fā)者工具，將代碼插入到編輯器并保存。

大功告成，快看看效果吧！

源碼和效果演示:

https://dev.xingway.com/experiments/wechat/svg/

到此這篇關(guān)于公眾號(hào)SVG動(dòng)畫(huà)交互實(shí)戰(zhàn)代碼的文章就介紹到這了,更多相關(guān)公眾號(hào)SVG動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論