中秋圖文，教你3個切月餅的排版
中秋圖文中，往往少不了月亮或月餅這兩個元素。
在前幾天發的《中秋節SVG交互圖文案例合集》中，不少案例都是和月亮有關的，大家可以點擊藍字進入合集看看。
今天再和大家分享3個切月餅????的排版玩法。
玩法1，點擊切月餅。
點擊試試：
*素材來自最高人民檢察院《來來來，一起切月餅????～》
組件：點擊-左右滑動打開
編號：10193（組件）
教程：《點擊，開門！》
玩法2，滑動切月餅。
左右滑動試試：
*素材來自最高人民檢察院《來來來，一起切月餅????～》
組件：開門滑動-左右開門
編號：10019（組件）
玩法3，手勢切月餅。
沿虛線劃動試試：
*素材來自星巴克《切開月餅，一切都好》
組件：手勢-切換GIF動圖(有觸發區)
編號：10124（組件）
前兩種交互好理解，就是常見的點擊和滑動。第三種手勢是什么？
手勢切換，就是在圖片上按照提示的線路進行劃動，從而觸發切換圖片或播放GIF。
注意是「劃」不是「滑」，劃動與滑動的區別是，劃動更強調手指動作對交互的影響，滑動更側重于表達圖片跟隨手指移動的狀態。
如何用 iPaiban Pro 編輯器實現劃動切月餅？下面一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：手勢-切換GIF動圖(有觸發區)
編號：10124（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「手勢」分類中找到「手勢-切換GIF動圖(有觸發區)」組件，或者直接在搜索框中搜索組合編號10124，點擊選擇。
第2步：上傳圖片素材
在頁面右側點擊「換圖」按鈕，分別上傳「手劃屏幕前」圖片和「手劃屏幕后」圖片。
「手劃屏幕前」圖片通常為GIF動圖播放前的第一幀圖片或提示圖，「手劃屏幕后」圖片為需要播放GIF動圖。兩張圖片尺寸比例需一致。
第3步：調整動畫參數
在此案例中，「圖片切換時間」調整為最短時間0.1s，瞬間切換就會有播放GIF的效果；「觸發延遲時間」調整為0.5s左右，給用戶留有一定的執行劃動動作的時間。
第4步：調整觸發區域
雙擊編輯區上傳的圖片，將色塊調整至圖片的虛線位置。用戶在此區域內劃動就會觸發交互。
第5步：導入到公眾號后臺
點擊最右側「預覽草稿」，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）