公眾號SVG動畫交互實戰(zhàn)代碼
越來越多的公眾號在圖文消息中加入了SVG動畫交互效果，SVG支持事件觸發(fā)動畫，相對于單獨做一個H5而言，由于公眾號消息依托于微信服務器，為廣告主節(jié)約了服務器流量成本。這次我們以蘋果公眾號的一篇交互消息為例，剖析下里面的效果是怎樣實現(xiàn)的。
蘋果公眾號SVG交互
動畫主要分為兩屏，第一屏出現(xiàn)閃動文字提示用戶點擊交互，用戶點擊后第一屏動畫消失接著播放第二屏的gif動畫，最后畫面停止在產(chǎn)品圖片幀上。
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內(nèi)所有元素的相對位置。w，h用來控制svg寬高，這里的寬高并不是svg元素的dom尺寸，而是svg的內(nèi)分辨率，受svg的width，height和preserveAspectRatio等屬性值影響。
preserveAspectRatio=”xMinYMin meet”
preserveAspectRatio屬性用來設置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>
設置文字的位置和顏色屬性。
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位移屬性設置為 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用來對元素進行位移，旋轉，斜切等操作。
- transform，可以是 translate、scale、rotate、skewX、skewY 。
- fill，指定動畫間隙的填充方式。支持參數(shù)有：freeze、remove。remove是默認值，表示動畫結束直接回到開始的地方。freeze表示動畫維持結束后的狀態(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動畫，我希望在動畫播放結束后隱藏當前的svg層，這里設置在點擊事件3.5秒后觸發(fā)，正好是動畫播放的時間。
2.構建第二屏動畫：
第二屏動畫是一張靜態(tài)圖片，用來顯示gif動畫最后一幀的產(chǎn)品圖，沒有什么新知識點，如有疑問可以參考本文的源碼。
最后介紹一下兩屏動畫的組織方式，我將每屏動畫放在一個單獨的div標簽中，并設置div標簽的高度為0，由于svg元素的高度不受父容器高度影響，結果會產(chǎn)生類似層疊定位效果，就像設置父容器定位position:absolute一樣。
<div > <svg></svg> </div> <div > <svg></svg> </div>
這樣我們就可以將多組動畫放在各自的div中，當使用animate動畫隱藏了該組svg元素后，下面一層的svg就會展示出來等待交互。
3. 插入到公眾號文章中
我們現(xiàn)在用到的圖片都在本地，首先需要將用到的圖片上傳到公眾號素材庫中，提取url地址并替換掉本地圖片地址。
因為公眾號圖文編輯器本身并不支持代碼編輯，我們需要借助chrome開發(fā)者工具，將代碼插入到編輯器并保存。
大功告成，快看看效果吧！
源碼和效果演示:
https://dev.xingway.com/experiments/wechat/svg/
到此這篇關于公眾號SVG動畫交互實戰(zhàn)代碼的文章就介紹到這了,更多相關公眾號SVG動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本節(jié)主要介紹了checkbox選中與未選中的判斷方法，需要的朋友可以參考下2014-08-08
本文主要介紹了小程序實現(xiàn)Token生成與驗證，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了在JSP中如何實現(xiàn)MD5加密的方法,較為詳細的分析了JSP采用MD5加密的功能、特點及實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下.2016-11-11
Javascript中使用parseInt函數(shù)需要注意的問題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問題,本文講解了parseInt函數(shù)在IE8下可能會返回0值的兼容問題解決方法,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
在《理解Javascript_12_執(zhí)行模型淺析》一文中,我們初步的了解了執(zhí)行上下文與作用域的概念，那么這一篇將深入分析執(zhí)行上下文的構建過程，了解執(zhí)行上下文、函數(shù)對象、作用域三者之間的關系。2010-10-10
這篇文章主要介紹了JS實現(xiàn)的簡單標簽點擊切換功能,涉及javascript事件響應及頁面元素遍歷、屬性動態(tài)變換等相關操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JavaScript 聲明提升的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
Javascript 模擬mvc實現(xiàn)點餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實現(xiàn)點餐程序案例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
ie6,7下js動態(tài)加載圖片不顯示錯誤，碰到這類問題的朋友可以參考下。2010-07-07