用代碼詳解如何實現(xiàn)公眾號SVG動畫交互

發(fā)布時間：2020-07-20 15:09:09 來源：億速云閱讀：571 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是用代碼詳解如何實現(xiàn)公眾號SVG動畫交互，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

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

蘋果公眾號SVG交互

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

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

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>

先來介紹viewBox屬性

viewBox=”x, y, w, h”

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

preserveAspectRatio=”xMinYMin meet”

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

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>

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

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之間變換，產(chǎn)生閃爍的效果。
g標簽即group的縮寫，用來對元素進行組合，這樣animate效果就限制在組內(nèi)。

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, y, width, height, transform位移等屬性，這里我們將包含gif動畫圖片的foreignObject位移屬性設(shè)置為 transform=”translate(1080, 0)，使gif動畫沿x軸向右移動自身寬度距離，使動畫開始隱藏起來，等待事件觸發(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" >>點一下屏幕，有請主角<</text>
   </g>
  </g>
 </g>
</svg>

animateTransform用來對元素進行位移，旋轉(zhuǎn)，斜切等操作。
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，延遲時間已經(jīng)介紹過，這里補充下click，表示點擊后立即觸發(fā)， click+2表示點擊后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>

這段代碼的意思是，鼠標點擊后，我們將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動畫，我希望在動畫播放結(jié)束后隱藏當前的svg層，這里設(shè)置在點擊事件3.5秒后觸發(fā)，正好是動畫播放的時間。

2.構(gòu)建第二屏動畫：

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

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

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

用代碼詳解如何實現(xiàn)公眾號SVG動畫交互

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

3. 插入到公眾號文章中

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

用代碼詳解如何實現(xiàn)公眾號SVG動畫交互

因為公眾號圖文編輯器本身并不支持代碼編輯，我們需要借助chrome開發(fā)者工具，將代碼插入到編輯器并保存。

用代碼詳解如何實現(xiàn)公眾號SVG動畫交互

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

看完這篇關(guān)于用代碼詳解如何實現(xiàn)公眾號SVG動畫交互的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細節(jié)

用代碼詳解如何實現(xiàn)公眾號SVG動畫交互

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽