欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

公眾號SVG動畫交互實(shí)戰(zhàn)代碼

 更新時間：2020年05月31日 10:42:55   作者：imokya  
這篇文章主要介紹了公眾號SVG動畫交互實(shí)戰(zhàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

蘋果公眾號SVG交互

動畫主要分為兩屏，第一屏出現(xiàn)閃動文字提示用戶點(diǎn)擊交互，用戶點(diǎ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ù)視口的寬高進(jìn)行等比例縮放，這里的視口就是指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" >>點(diǎn)一下屏幕，有請主角<</text>
</svg>

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

1.3 為文字添加動畫，這里需要用到 <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)一下屏幕，有請主角<</text>
 </g>
</svg>
  • animate標(biāo)簽用來對元素的某個屬性進(jìn)行動畫。
  • attributeName指定屬性名，這里是透明度opacity。
  • begin指定動畫開始的時間，可以是一組用分號分隔的值。
  • dur指定動畫的時長，值越小動畫越快，反之亦然。
  • values指定attributeName屬性的變化值，可以是單值也可以是分號分隔的列表。這里的1;0;1指定是透明度在0->1->0之間變換，產(chǎn)生閃爍的效果。
  • g標(biāo)簽即group的縮寫，用來對元素進(jìn)行組合， 這樣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" >>點(diǎn)一下屏幕，有請主角<</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" >>點(diǎn)一下屏幕，有請主角<</text>
   </g>
  </g>
 </g>
</svg>
  • animateTransform用來對元素進(jìn)行位移，旋轉(zhuǎn)，斜切等操作。
  • transform，可以是 translate、scale、rotate、skewX、skewY 。
  • fill，指定動畫間隙的填充方式。支持參數(shù)有：freeze、remove。remove是默認(rèn)值，表示動畫結(jié)束直接回到開始的地方。freeze表示動畫維持結(jié)束后的狀態(tài)。
  • restart， 支持的參數(shù)有always、whenNotActive、never。always是默認(rèn)值，表示每點(diǎn)一次重新執(zhí)行動畫；whenNotActive表示動畫正在進(jìn)行的時候不能重啟動畫；never表示動畫僅執(zhí)行一次。
  • begin， 延遲時間已經(jīng)介紹過，這里補(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動畫所在組向左移動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é)束后隱藏當(dāng)前的svg層，這里設(shè)置在點(diǎn)擊事件3.5秒后觸發(fā)，正好是動畫播放的時間。

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

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

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

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

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

3. 插入到公眾號文章中

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

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

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

源碼和效果演示:

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

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

相關(guān)文章

最新評論