“不用Ps，如何實現圖文中那些觸發按鈕的動效啊？”
SVG交互圖文中，少不了提醒觸發的按鈕。
而按鈕往往會帶有一定的動效，兩年前出過一篇教程，教大家用Ps制作那些提醒觸發的按鈕動效。
*圖片分別來自Nespresso濃遇咖啡、安慕希公眾號
其實，如果想要實現按鈕閃爍之類的按鈕動效，我們早已可以不用Ps，而直接用 iPaiban Pro 編輯器就能實現，方便很多。
更重要的是，使用 iPaiban Pro 制作按鈕動效，當用戶點擊或滑動按鈕時，在觸發交互的同時按鈕也會消失，更加符合邏輯。
感受一下：
*素材來自極氪ZEEKR《萬圣之夜，馭光穿行》
組件：點擊-切換圖片(有觸發區)
編號：10043（組件）
組件：觸發提示遮罩
編號：11727（組件）
*素材來自德國BEBA3《快樂守護，每個放大「德」童心！》
組件：點擊-切換GIF動圖(有觸發區)
編號：10087（組件）
組件：觸發提示遮罩
編號：11727（組件）
*素材來自北京汽車《以「職場術語」解鎖新X7》
組合：點擊消失+展開(設置觸發區域)
編號：11186（組合）
組件：觸發提示遮罩
編號：11727（組件）
這就是「觸發提示遮罩」組件（編號：11727），將它放在需要提示觸發的組件后面，它會自動覆蓋在前面組件之上。
另外「觸發提示遮罩」還有左右浮動、上下浮動的動效可供選擇。
*素材來自梅賽德斯-奔馳《成年人如何做選擇？》
組件：單層滑動-左滑(自動對齊)
編號：10236（組件）
組件：觸發提示遮罩
編號：11727（組件）
*素材來自DanielWellington《「時尚」的可持續新鮮事兒》
組件：雙層滑動-前景上滑(自動對齊)
編號：10272（組件）
組件：觸發提示遮罩
編號：11727（組件）
下面以第1個極氪閃爍的動效為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com
組件：觸發提示遮罩
編號：11727（組件）
第1步：制作需要提示觸發的交互效果
第1個極氪的案例，需提示觸發的交互效果為點擊切換圖片。
登錄 iPaiban Pro 編輯器后，在左側「組件」中點擊選擇「點擊-切換圖片(有觸發區)」組件（編號：10043）。這一步根據自己的需求也可以選擇其他交互組件。
接著上傳圖片并按照提示調整觸發區。注意這里調整的觸發區位置應和后面觸發提示按鈕的位置大致相同。
第2步：選擇「觸發提示遮罩」組件并上傳圖片
直接在左上角搜索框中搜索「觸發提示遮罩」組件編號11727，點擊選擇。
接著在右側點擊「換圖」上傳靜態按鈕圖片。一般為PNG格式，尺寸和前面組件的圖片保持一致。
第3步：選擇提示方式
提示方式也就是動效效果。這里我們選擇「閃爍」，并調整參數。
第4步：調整觸發區域
雙擊上傳的圖片，調出觸發區域調整窗口，通過調整紅色色塊的位置和大小調整觸發的區域。
注意，「觸發提示遮罩」的觸發區域不要鋪滿整張圖片，因為它的觸發方式是觸摸，手指碰到就會消失，最好將觸發區域正好設置在按鈕上，并且和前面組件交互效果的觸發區域保持一致。
第5步：導入到公眾號后臺
點擊「預覽草稿」可在編輯器中手機掃碼預覽效果，檢查沒有問題后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）