SVG交互效果進(jìn)階：揭秘點(diǎn)擊展開的Next Level技巧
公眾號(hào)排版的SVG交互技巧，提升用戶互動(dòng)體驗(yàn)。本文深入解析點(diǎn)擊展開效果的高級(jí)應(yīng)用，教你如何利用135編輯器創(chuàng)建引人入勝的SVG動(dòng)畫。從基礎(chǔ)操作到高級(jí)技巧，一文搞懂SVG編輯器的使用，增強(qiáng)你的公眾號(hào)內(nèi)容吸引力。立即學(xué)習(xí)，讓你的推文效果Next Level！
朋友們大家好，我是三兒。
相信大家平日里使用SVG交互效果，常用的就有點(diǎn)擊展開，點(diǎn)擊展開不僅能承載多交互，還能巧妙隱藏部分內(nèi)容，引導(dǎo)用戶探尋。
不過用多了點(diǎn)擊展開，總覺得會(huì)有些審美疲勞，別著急點(diǎn)擊展開已經(jīng)進(jìn)化到next level了，快來看看吧！
今天給大家?guī)淼慕虒W(xué)案例是來自王小鹵的感恩節(jié)推文，開屏點(diǎn)擊上滑后展開余下內(nèi)容。
點(diǎn)擊會(huì)有一個(gè)推出效果，展開后是嵌套了點(diǎn)擊換圖的效果，那么這個(gè)效果我們應(yīng)該如何制作呢，別著急馬上開啟我們今日的SVG學(xué)習(xí)之旅。
注：本文素材來源均來自王小鹵，僅做教學(xué)使用。
在135編輯器頁面左側(cè)找到「SVG編輯器」
進(jìn)入SVG編輯器后在左側(cè)選中「互動(dòng)效果」，在搜索框搜索組件點(diǎn)擊封面圖上移-自動(dòng)展開或組件ID：920
點(diǎn)擊組件進(jìn)入SVG編輯器中，這個(gè)時(shí)候我們需要看清楚素材要求。
該效果素材要求比較簡(jiǎn)單，僅需要素材圖寬度一致即可。
準(zhǔn)備好素材圖后，我們就可以按照要求上傳素材圖了。
上傳好「封面圖后」，我們可以選擇封面圖移出的方向，有上下左右供大家選擇。
封面圖完成后，我們點(diǎn)擊「編輯展開內(nèi)容」里面添加我們后續(xù)的展開效果，原內(nèi)容展開后先是一個(gè)無縫圖點(diǎn)擊不可彈出，后面緊接著點(diǎn)擊換圖的效果。
這里我們使用的組件是無縫圖（點(diǎn)擊不可彈出）ID：1、多次點(diǎn)擊換圖（自定義觸發(fā)）（gif圖） ID：11
后面就是重復(fù)上述步驟，添加后續(xù)的點(diǎn)擊換圖內(nèi)容。
來簡(jiǎn)單，看看效果吧??
完成所有內(nèi)容后，可以選擇編輯器右上角的「同步」就能同步到授權(quán)公眾號(hào)后臺(tái)，只有公眾號(hào)授權(quán)給135后才可以使用同步功能。
如果沒有授權(quán)也可以下載135插件，通過插件同步到微信公眾號(hào)后臺(tái)，只有谷歌瀏覽器安裝了插件后才可以使用插件同步。
如果需要將做好的內(nèi)容放進(jìn)135編輯器編輯頁中，選擇「導(dǎo)出」-「復(fù)制代碼到135編輯器」即可
三兒說：在展開內(nèi)容板塊中，我們不僅可以添加點(diǎn)擊換圖，還有輪播，雙層滑動(dòng)、音頻、視頻、超鏈接等內(nèi)容，超多組合玩法等你開發(fā)，大家快去試試吧。
怎么樣
今天的SVG效果還不錯(cuò)吧
相信聰明的你
已經(jīng)學(xué)會(huì)了
學(xué)會(huì)了就快動(dòng)手試試吧
還有什么想看想學(xué)的技巧/效果
記得在評(píng)論區(qū)留言告訴我喔~
立即登錄
