朋友們大家好，我是三兒。

相信大家平日里使用SVG交互效果，常用的就有點(diǎn)擊展開(kāi)，點(diǎn)擊展開(kāi)不僅能承載多交互，還能巧妙隱藏部分內(nèi)容，引導(dǎo)用戶探尋。

不過(guò)用多了點(diǎn)擊展開(kāi)，總覺(jué)得會(huì)有些審美疲勞，別著急點(diǎn)擊展開(kāi)已經(jīng)進(jìn)化到next level了，快來(lái)看看吧！

今天給大家?guī)?lái)的教學(xué)案例是來(lái)自王小鹵的感恩節(jié)推文，開(kāi)屏點(diǎn)擊上滑后展開(kāi)余下內(nèi)容。

點(diǎn)擊查看原文

點(diǎn)擊會(huì)有一個(gè)推出效果，展開(kāi)后是嵌套了點(diǎn)擊換圖的效果，那么這個(gè)效果我們應(yīng)該如何制作呢，別著急馬上開(kāi)啟我們今日的SVG學(xué)習(xí)之旅。

注：本文素材來(lái)源均來(lái)自王小鹵，僅做教學(xué)使用。

在135編輯器頁(yè)面左側(cè)找到「SVG編輯器」

進(jìn)入SVG編輯器后在左側(cè)選中「互動(dòng)效果」，在搜索框搜索組件點(diǎn)擊封面圖上移-自動(dòng)展開(kāi)或組件ID：920

點(diǎn)擊組件進(jìn)入SVG編輯器中，這個(gè)時(shí)候我們需要看清楚素材要求。

該效果素材要求比較簡(jiǎn)單，僅需要素材圖寬度一致即可。

準(zhǔn)備好素材圖后，我們就可以按照要求上傳素材圖了。

上傳好「封面圖后」，我們可以選擇封面圖移出的方向，有上下左右供大家選擇。

封面圖完成后，我們點(diǎn)擊「編輯展開(kāi)內(nèi)容」里面添加我們后續(xù)的展開(kāi)效果，原內(nèi)容展開(kāi)后先是一個(gè)無(wú)縫圖點(diǎn)擊不可彈出，后面緊接著點(diǎn)擊換圖的效果。

這里我們使用的組件是無(wú)縫圖（點(diǎn)擊不可彈出）ID：1、多次點(diǎn)擊換圖（自定義觸發(fā)）（gif圖） ID：11

后面就是重復(fù)上述步驟，添加后續(xù)的點(diǎn)擊換圖內(nèi)容。

來(lái)簡(jiǎn)單，看看效果吧??

完成所有內(nèi)容后，可以選擇編輯器右上角的「同步」就能同步到授權(quán)公眾號(hào)后臺(tái)，只有公眾號(hào)授權(quán)給135后才可以使用同步功能。

如果沒(méi)有授權(quán)也可以下載135插件，通過(guò)插件同步到微信公眾號(hào)后臺(tái)，只有谷歌瀏覽器安裝了插件后才可以使用插件同步。

點(diǎn)我下載好用的135插件

如果需要將做好的內(nèi)容放進(jìn)135編輯器編輯頁(yè)中，選擇「導(dǎo)出」-「復(fù)制代碼到135編輯器」即可

三兒說(shuō)：在展開(kāi)內(nèi)容板塊中，我們不僅可以添加點(diǎn)擊換圖，還有輪播，雙層滑動(dòng)、音頻、視頻、超鏈接等內(nèi)容，超多組合玩法等你開(kāi)發(fā)，大家快去試試吧。

怎么樣

今天的SVG效果還不錯(cuò)吧

相信聰明的你

已經(jīng)學(xué)會(huì)了

學(xué)會(huì)了就快動(dòng)手試試吧

還有什么想看想學(xué)的技巧/效果

記得在評(píng)論區(qū)留言告訴我喔~