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

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

不過用多了點擊展開，總覺得會有些審美疲勞，別著急點擊展開已經進化到next level了，快來看看吧！

今天給大家帶來的教學案例是來自王小鹵的感恩節推文，開屏點擊上滑后展開余下內容。

點擊查看原文

點擊會有一個推出效果，展開后是嵌套了點擊換圖的效果，那么這個效果我們應該如何制作呢，別著急馬上開啟我們今日的SVG學習之旅。

注：本文素材來源均來自王小鹵，僅做教學使用。

在135編輯器頁面左側找到「SVG編輯器」

進入SVG編輯器后在左側選中「互動效果」，在搜索框搜索組件點擊封面圖上移-自動展開或組件ID：920

點擊組件進入SVG編輯器中，這個時候我們需要看清楚素材要求。

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

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

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

封面圖完成后，我們點擊「編輯展開內容」里面添加我們后續的展開效果，原內容展開后先是一個無縫圖點擊不可彈出，后面緊接著點擊換圖的效果。

這里我們使用的組件是無縫圖（點擊不可彈出）ID：1、多次點擊換圖（自定義觸發）（gif圖） ID：11

后面就是重復上述步驟，添加后續的點擊換圖內容。

來簡單，看看效果吧??

完成所有內容后，可以選擇編輯器右上角的「同步」就能同步到授權公眾號后臺，只有公眾號授權給135后才可以使用同步功能。

如果沒有授權也可以下載135插件，通過插件同步到微信公眾號后臺，只有谷歌瀏覽器安裝了插件后才可以使用插件同步。

點我下載好用的135插件

如果需要將做好的內容放進135編輯器編輯頁中，選擇「導出」-「復制代碼到135編輯器」即可

三兒說：在展開內容板塊中，我們不僅可以添加點擊換圖，還有輪播，雙層滑動、音頻、視頻、超鏈接等內容，超多組合玩法等你開發，大家快去試試吧。

怎么樣

今天的SVG效果還不錯吧

相信聰明的你

已經學會了

學會了就快動手試試吧

還有什么想看想學的技巧/效果

記得在評論區留言告訴我喔~