展開之前的GIF那么長，為什么還可以這么高清和流暢？
每次精心制作的GIF，上傳到公眾號就秒變「糊圖戰士」，只能不斷壓縮、刪減再調整……簡直苦不堪言！
但為什么有的圖文在展開之前的GIF時長那么長，但還可以這么高清和流暢？
之前給大家介紹過序列幀動效+展開的排版，優化GIF的呈現效果很有效，點擊試試：
*素材來自大疆《大疆天空之城 8 周年影像大賽正式開啟》
組合：點擊-切換序列幀+展開
編號：11485（組合）
教程：《圖文開頭的動圖，為什么蘋果和大疆的總是那么高清又流暢？》
就是這么絲滑。下面是開頭動效的部分排版素材，連貫的動效就是這近百張靜態序列幀圖片實現的：
今天再來揭秘一個優化小妙招——串聯GIF動圖+展開，讓你面對長GIF又難以轉化序列幀時也可以兼得流暢與清晰。
我們先來看兩個案例，第1個是保時捷的案例：
*素材來自保時捷中國《抽一臺“保時捷”》
組合：點擊串聯GIF動圖+展開(設置觸發區)
編號：10860（組合）
開頭的長GIF其實由下面4張圖串聯起來合成的，使得GIF整體看著很長但播放時卻流暢絲滑且清晰。
同款SVG交互的還有法拉利的這篇圖文，看看效果：
*素材來自法拉利中國《躍啟文化尋蹤之旅》
組合：點擊串聯GIF動圖+展開(設置觸發區)
編號：10860（組合）
這篇開頭動效也是有3張GIF串聯成的。
大家在 iPaiban Pro 編輯器「組合」中搜索關鍵詞「串聯」，可以看到所有串聯GIF動圖+展開的組合，它們在展開的形式上稍有不同。
這些效果的制作方法差不多，以本文「點擊串聯GIF動圖+展開」的效果為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊串聯GIF動圖+展開(設置觸發區)
編號：10860（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，搜索組合編號10860或按照分類找到「點擊串聯GIF動圖+展開(設置觸發區)」組合，點擊選擇。
第2步：進入組合編輯模式
點擊編輯區的「點擊此處配置」，進入組合編輯模式。在組合編輯模式中，分為「展開前」和「展開后」兩個區域。
第3步：上傳展開前的圖片
點擊「展開前」區域，右側會提示上傳封面圖、需要控制播放的GIF動圖和最后一個GIF的最后一幀或新的圖片。
封面圖是我們打開圖文第一眼看到的圖片，GIF動圖便是展開前播放的動圖。
注意！想要實現完美的串聯GIF動圖效果，封面圖、需要控制播放的GIF動圖和最后一個GIF的最后一幀或新的圖片最好尺寸一致。
第4步：調整點擊觸發區域
雙擊「展開前」的編輯區域，會看到一個紅色色塊，該色塊代表了點擊展開觸發的區域，它的大小和位置可任意調整。
第5步：上傳展開后的圖片
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第6步：設置背景移動速度和展開時長
點擊頁面右側紅色小三角，會看到「所有動圖播放結束后，停留時長」、「展開所需時長」、「點擊后，第1個GIF播放時長」、「點擊后，第2個GIF播放時長」等設置項。
根據所需效果，依次設置好參數。
點擊下方「預覽組合」按鈕可隨時預覽效果并更改設置。
第7步：導入到公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）