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