在GIF下面，可以隨便設置交互效果了？
之前，我們介紹過「點擊切換圖片組合」的效果玩法（教程）。上方覆蓋一層封面圖片，圖片下方可以再疊加一層交互，用戶點擊上方圖片便會顯現下層交互。
上面這個案例的第一步交互為點擊切換圖片。
那么玩法再升級！
今天為大家介紹一款更生動的點擊切換組合的交互效果，靜態圖升級GIF圖，切換時圖片動起來，效果更加逼真生動。
一起來體驗下這個案例：
*素材來自毫末智行《驚喜......永不落幕！》
組合：點擊播放GIF切換組合
編號：11773（組合）
帷幕拉開的效果很有儀式感，拉開帷幕后點擊不同的模型進入到不同的視頻號。
這交互看起來復雜，其實實現起來很簡單，帷幕拉開的效果可以換成其他各種效果的GIF，GIF播放完畢后點擊進入視頻號的效果也可以換成其他各種交互。
這個案例用到的組合效果就是 iPaiban Pro 黑科技編輯器里的「點擊播放GIF切換」組合（編號11773）。
那我們一起來看看是如何制作的吧？
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊播放GIF切換組合
編號：11773（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「點擊切換」分類中找到「點擊播放GIF切換組合」組合，或者直接在搜索框中搜索組合編號11773，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為切換前和切換后兩塊設置區域。
第3步：設置「切換前」內容
點擊「切換前」區域，在右側點擊2個「換圖」按鈕，分別上傳準備好的單擊前和單擊后圖片。
單擊前圖片一般為GIF圖的第一幀，單擊后圖片為點擊播放的GIF，兩張圖片尺寸比例需保持一致。
第4步：設置「切換后」內容
「切換后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置參數
點擊右側紅色小三角，可以設置播放時長和切換時長。
播放時長是指GIF的時長，切換時長指播放完GIF后切換到「切換后」內容的動畫時長。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）