長按啟動圖文……
打開圖文，長按按鈕，酷炫動效隨之播放，接著點擊圖文展開。
這是上周三在 iPaiban Pro 三周年的宣傳圖文中使用的一個排版效果，很多小伙伴覺得很有意思，今天就為大家解密一下。
解密之前先再體驗一下：
*素材來自i排版編輯器《快?來?看?，公?眾?號?里?也?下?雪?了?????》
組合：長按切換序列幀+點擊展開
編號：11816（組合）
長按播放后的動效絲滑，很多小伙伴覺得這不是GIF而是用代碼編寫SVG格式實現的。
其實這個長按播放的動效既不是GIF也不是SVG格式，而是序列幀。序列幀動效是指一系列靜態圖通過排版實現的一種連貫動態效果。
這是用到的序列幀素材：
之前教過大家如何將GIF或視頻轉化為序列幀的方法，詳細教程戳：《教你制作蘋果高級序列幀動效！》
不是SVG高清動效做不起，而是序列幀更有性價比！知道如何轉化序列幀圖片，前面的排版我們就可以通過編輯器「長按切換序列幀+點擊展開」組合（編號：11816）來實現啦！
視頻教程：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：長按切換序列幀+點擊展開
編號：11816（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」分類中找到「長按切換序列幀+點擊展開」組合，或者直接在搜索框中搜索組合編號11816，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。
第3步：設置「展開前」內容
①上傳提示圖片：點擊「展開前」區域，在右側點擊2個「換圖」按鈕，分別上傳準備好的提示長按圖片和提示點擊圖片。兩張圖片尺寸保持一致。
②設置提示圖片觸發區：點擊「展開前」編輯區，拖動紅色區域設置觸發區。提示長按圖片和提示點擊圖片觸發區位置相同。
③上傳序列幀圖片：點擊右側「+」按鈕，分別上傳長按時播放的序列幀圖片和長按結束播放的序列幀圖片。
由于序列幀圖片較多，將長按時播放的序列幀圖片和長按結束播放的序列幀圖片分開整理在兩個文件夾，上傳圖片時可以選擇「按文件夾上傳圖片」。
按文件夾上傳圖片后，在「文件夾管理」點擊相應的文件夾，選中1個圖片后，再點擊「選中本頁圖片」，即可批量插入序列幀圖片，非常高效方便，省去一張張選擇的麻煩。
④設置動畫參數：設置每張序列幀圖片的停留時間參數及長按結束播放的序列幀圖片中，開始出現點擊提示的序號。
每張圖片停留時間越短，動效播放越快。開始出現點擊提示的序號為左上角的序號。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置參數
點擊右側紅色小三角，可以設置展開時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，手機掃描二維碼預覽，效果滿意后接著點擊「同步至微信后臺」就可以了。由于該效果使用序列幀圖片較多，第一次同步時所需時間較久，請耐心等待。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）