不用音頻，點擊展開的 BGM 還能這樣玩！
有一類 SVG 交互效果，相信大家屢見不鮮，無論是官媒大號，還是普通賬號，都經常在推文開篇看見他的應用，那就是「點擊展開」。
如何將「點擊展開」玩出花樣，從眾多推文中脫穎而出呢？
不如加點音樂吧！
點擊，BGM 起！
*素材來自谷粒多《谷粒多大暑佛系營業，大粒療愈你的身心燥熱》
組合：點擊切換圖片+播放音頻+展開(以視頻方式上傳)
編號：11359（組合）
點擊木魚，展開的同時響起敲擊木魚聲，既符合推文的主題「佛系」，又能增加讀者的沉浸體驗。
當然是不是也有細心的小伙伴發現了，谷粒多的這篇推文在點擊展開播放音頻時沒有彈出音頻播放的懸浮窗，更像推文自帶的 BGM。
這種沒有懸浮窗的音頻播放不僅適合放在推文整篇的開頭，更適合一篇推文中多個點擊展開效果同時使用的情況。
比如 Bose 這篇推文，點擊不同的商品，展開圖文的同時播放不同的音樂，可以讓用戶更加了解產品的特點，提供更直觀的產品感受。
*素材來自Bose《是什么節奏讓人如此上頭？》
組合：點擊切換圖片+播放音頻+展開(以視頻方式上傳)
編號：11359（組合）
這兩個案例用到的效果就是使用 iPaiban Pro 黑科技編輯器里的「 點擊切換圖片+播放音頻+展開(以視頻方式上傳)」組合（編號11359）制作的。
相比純音頻，以視頻方式上傳的可以調整觸發區（但不建議調得太大和貼近圖片邊緣，否則可能影響觸發），支持直接轉載，點擊播放時不會彈出懸浮彈窗，更干凈。
那我們以案例1為例，來看看是如何制作的吧？
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊切換圖片+播放音頻+展開(以視頻方式上傳)
編號：11359（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「播放音頻+展開」分類中找到「點擊切換圖片+播放音頻+展開(以視頻方式上傳)」組合，或者直接在搜索框中搜索組合編號11359，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。
第3步：設置「展開前」內容
①上傳圖片：點擊「展開前」區域，在右側點擊2個「換圖」按鈕，分別上傳準備好的點擊前圖片和點擊后圖片。圖片尺寸需保持一致。
②輸入視頻id：在公眾號后臺新建圖文，上傳音樂視頻（尺寸比例16:9，畫面無要求，純黑即可），上傳成功后插入圖文，然后使用 iPaiban Pro 小助手插件一鍵提取視頻id。詳細教程見：《iPaiban Pro小助手安裝和使用教程》
點擊「一鍵復制id」，然后在編輯器指定位置粘貼即可。
③調整觸發區域：雙擊「展開前」區域圖片顯示觸發區域，拖動紅色色塊調整觸發區域。（不建議調得太大和貼近圖片邊緣，否則可能影響觸發）
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置參數
點擊右側紅色小三角，可以設置展開時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
該效果不支持在編輯器預覽。點擊「同步至微信后臺」等待同步成功，然后掃碼預覽效果即可。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）