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

大家還記得自己初次接觸svg交互效果是哪一個嗎？我想不少朋友會說：點擊展開

沒錯點擊展開頗有點“聚是一團火，散是滿天星”的感覺，向你展示的只有一小塊，但點開后內(nèi)藏乾坤。

時過境遷，點擊展開也發(fā)生了不少變化。（什么？你該不會還以為點擊展開就僅僅是點擊展開吧），大人，時代變了！

今天三兒就和你好好說道說道，有關(guān)點擊展開的事兒??

注意??：本文介紹的皆是svg組件，需要在svg編輯器中搜索使用。

svg編輯器網(wǎng)址：

http://m.qwer.com.cn/svgeditor/

#點擊直接展開（自定義觸發(fā)）組件ID：57

這個效果奶茶??飲品類公眾號最喜歡使用，我們以@茶百道為例就像這樣??

點擊直接展開看似簡單，卻印證了“高端食材往往只需要簡單的烹飪”，點擊直接展開更考驗大家的繪圖制圖水平，很多行家里手將圖做的就像運用了效果，達到了“以假亂真”的奇效，點擊直接展開詮釋了什么叫【平平淡淡才是真但又不甘于平淡】的真諦。

注意??：之前有不少朋友問我：三兒，有什么辦法能實現(xiàn)進入文章自動播放音頻呢？

很遺憾，因為微信官方擔(dān)心用戶手機流量流失等問題，不允許音頻自動播放。故所有的音頻播放都需要一個【點擊】的觸發(fā)條件，那么在點擊展開中嵌入音頻，是不是能讓用戶【潤物細無聲】觸發(fā)音頻，實現(xiàn)【無感播放】的效果呢？

#點擊展開同時播放qq音樂（自定義觸發(fā)）組件ID：228

#同樣的一套圖，但是加了一個bgm感覺立馬就不同了，這里我們需要注意的是，我們使用的是【QQ音樂】所以本地音頻無法插入使用（如果想要使用自己的音頻，可以用組件點擊展開同時播放音頻-自定義觸發(fā) 組件ID：109）

如何獲取音頻代碼？

01.在微信后臺新建一篇文章插入qq音樂后保存文章

02.在微信公眾號后臺點擊文章標(biāo)題，進入文章臨時預(yù)覽界面，復(fù)制文章鏈接??

03.在svg編輯器頁面，將剛剛復(fù)制的文章鏈接粘貼到【一鍵獲取代碼】組件自動獲取音頻代碼

#此效果適用營造【謎團】需要層層剖析且內(nèi)容較多的文章，若是直接展開內(nèi)容太多會顯得冗長，多重展開能夠人為的分段，巧妙引導(dǎo)讀者閱讀完文章。

這里我們還是借用茶百道的圖為例子??

注意??：我們在使用各種組件的時候，一點要注意看組件的素材要求，有不少朋友不按規(guī)則上傳圖片出錯后，還不知道自己錯在哪里了。

當(dāng)然除了三兒介紹的這三種點擊展開，svg編輯器里還有很多有關(guān)點擊展開的組件，包括但不限于圖文依次停頓式展開、點擊放大換圖展開（自定義觸發(fā)）......大家可以在svg編輯器的搜索框中搜索關(guān)鍵詞【點擊展開】就能找到相關(guān)組件啦。

以上就是的全部內(nèi)容了

關(guān)于更多排版小技巧

敬請鎖定135編輯器