越來越多的公眾號在圖文訊息中加入了SVG動畫互動效果，SVG支援事件觸發動畫，相對於單獨做一個H5而言，由於公眾號訊息依託於微信伺服器，為廣告主節約了伺服器流量成本。這次我們以蘋果公眾號的一篇互動訊息為例，剖析下里面的效果是怎樣實現的。

蘋果公眾號SVG互動

動畫主要分為兩屏，第一屏出現閃動文字提示使用者點選互動，使用者點選後第一屏動畫消失接著播放第二屏的gif動畫，最後畫面停止在產品圖片幀上。

1.首先構建第一屏動畫：

1.1 SVG的基本結構

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

先來介紹viewBox屬性

viewBox=”x,y,w,h”

x、y 控制SVG內所有元素的相對位置。w，h用來控制svg寬高，這裡的寬高並不是svg元素的dom尺寸，而是svg的內解析度，受svg的width，height和preserveAspectRatio等屬性值影響。

preserveAspectRatio=”xMinYMin meet”

preserveAspectRatio屬性用來設定viewBox的縮放和對齊方式，xMinYMin meet的意思是，根據視口的寬高進行等比例縮放，這裡的視口就是指width和height值組成的矩形區域。

1.2 加入閃動文字

<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" >>點一下螢幕，有請主角<</text>
</svg>

設定文字的位置和顏色屬性。

1.3 為文字新增動畫，這裡需要用到 <g>和<animate>標籤

<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" >>點一下螢幕，有請主角<</text>
 </g>
</svg>

• animate標籤用來對元素的某個屬性進行動畫。
• attributeName指定屬性名，這裡是透明度opacity。
• begin指定動畫開始的時間，可以是一組用分號分隔的值。
• dur指定動畫的時長，值越小動畫越快，反之亦然。
• values指定attributeName屬性的變化值，可以是單值也可以是分號分隔的列表。這裡的1;0;1指定是透明度在0->1->0之間變換，產生閃爍的效果。
• g標籤即group的縮寫，用來對元素進行組合， 這樣animate效果就限制在組內。

1.4 加入首屏和動畫圖片

<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" >>點一下螢幕，有請主角<</text>
   </g>
  </g>
 </g>
</svg>

• 這裡我們加入了兩組foreignObject物件用來顯示封面和gif動畫圖片。
• foreignObject可以理解成一個svg容器，支援x,width,height,transform位移等屬性，這裡我們將包含gif動畫圖片的foreignObject位移屬性設定為 transform=”translate(1080,0)，使gif動畫沿x軸向右移動自身寬度距離，使動畫開始隱藏起來，等待事件觸發顯示。
• 我們將元素放在不同的分組裡，方便後面新增事件。

1.5 加入事件觸發

<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" >>點一下螢幕，有請主角<</text>
   </g>
  </g>
 </g>
</svg>

• animateTransform用來對元素進行位移，旋轉，斜切等操作。
• transform，可以是 translate、scale、rotate、skewX、skewY 。
• fill，指定動畫間隙的填充方式。支援引數有：freeze、remove。remove是預設值，表示動畫結束直接回到開始的地方。freeze表示動畫維持結束後的狀態。
• restart， 支援的引數有always、whenNotActive、never。always是預設值，表示每點一次重新執行動畫；whenNotActive表示動畫正在進行的時候不能重啟動畫；never表示動畫僅執行一次。
• begin， 延遲時間已經介紹過，這裡補充下click，表示點選後立即觸發， click+2表示點選後2秒觸發。

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

這段程式碼的意思是，滑鼠點選後，我們將gif動畫所在組向左移動1080距離，使原來隱藏的動畫暴露出來，還記得我們開始是怎麼隱藏gif動畫的麼。

<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動畫，我希望在動畫播放結束後隱藏當前的svg層，這裡設定在點選事件3.5秒後觸發，正好是動畫播放的時間。

2.構建第二屏動畫：

第二屏動畫是一張靜態圖片，用來顯示gif動畫最後一幀的產品圖，沒有什麼新知識點，如有疑問可以參考本文的原始碼。

最後介紹一下兩屏動畫的組織方式，我將每屏動畫放在一個單獨的div標籤中，並設定div標籤的高度為0，由於svg元素的高度不受父容器高度影響，結果會產生類似層疊定位效果，就像設定父容器定位position:absolute一樣。

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

這樣我們就可以將多組動畫放在各自的div中，當使用animate動畫隱藏了該組svg元素後，下面一層的svg就會展示出來等待互動。

3. 插入到公眾號文章中

我們現在用到的圖片都在本地，首先需要將用到的圖片上傳到公眾號素材庫中，提取url地址並替換掉本地圖片地址。

因為公眾號圖文編輯器本身並不支援程式碼編輯，我們需要藉助chrome開發者工具，將程式碼插入到編輯器並儲存。

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

原始碼和效果演示:

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

到此這篇關於公眾號SVG動畫互動實戰程式碼的文章就介紹到這了,更多相關公眾號SVG動畫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！