好酷！奧迪這種點擊播放GIF后展開怎么做的？
點擊播放GIF后展開的效果，想必大家都見過。
之前常見的點擊播放GIF后展開，首屏GIF播放結束后停留的圖片，必須和播放的GIF比例一致，并且首屏不能設置其他交互。
例如DR鉆戒的這篇圖文，點擊體驗：
*素材來自DR鉆戒《尋物啟事：一枚無價的30分DR》
組合：點擊切換GIF動圖+展開(有觸發區)
編號：10075（組合）
今天給大家介紹一個點擊播放GIF后展開的升級效果——點擊切換GIF+消失展開，這種效果點擊播放GIF后，首屏停留顯示的圖片尺寸可以和GIF的比例不一致，甚至可以設置交互效果。
比如奧迪的這篇圖文點擊播放GIF后，首屏顯示的圖片不屬于GIF，并且尺寸比例也與GIF不一致：
*素材來自奧迪《穿越通道開啟》
組合：點擊切換GIF+消失展開
編號：11775（組合）
蒙牛這篇點擊播放GIF后，首屏停留的也是不同尺寸的圖片：
*素材來自蒙牛專業乳品《音樂節熱浪來襲，B端商家如何捕捉“青年經濟”新趨勢？》
組合：點擊切換GIF+消失展開
編號：11775（組合）
喜力啤酒的這篇圖文，點擊播放GIF后則是有一個「點擊彈窗」的SVG效果：
*素材來自喜力啤酒《圣誕有喜力?，生活有星意！》
組合：點擊切換GIF+消失展開
編號：11775（組合）
可以看到，「點擊切換GIF+消失展開」在排版時更加靈活，視覺效果更吸睛，進而演變出更多的花樣玩法。
以奧迪的效果為例，下面一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊切換GIF+消失展開
編號：11775（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「切換圖片+展開」分類中找到「點擊切換GIF+消失展開」組合，或者直接在搜索框中搜索組合編號11775，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
第3步：設置「展開前」內容
點擊「展開前」區域，接著點擊右側兩個「換圖」按鈕，分別上傳單擊前和單擊后的圖片。
注意單擊前&后圖的尺寸要求：每張靜態圖(PNG|JPEG)尺寸保持一致；動態圖(GIF)比例與靜態圖保持一致。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置動畫參數
點擊右側紅色小三角符號，分別設置GIF動圖播放時長、播放后消失動畫時長、展開時長。
展開高度一般無需調整，但當大家在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候可以通過「加減展開高度」使其恰好展開。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）