彈~彈~彈~彈窗就是要彈出來！
超經典的懸浮彈窗效果，真的可以是彈出來啦！
之前，我們介紹過「點擊-懸浮彈窗」的效果玩法，我們先再來體驗一下。
彈窗為相同關閉位置的：
*素材來自時尚芭莎《湊完滿減，我后悔了......》
組件：點擊-懸浮彈窗(無限次彈出,相同關閉位置)
編號：11114（組件）
彈窗為不同關閉位置的：
*素材來自時尚芭莎《宋朝夢境，不止《夢華錄》》
組件：點擊-懸浮彈窗(無限次彈出,不同關閉位置)
編號：11118（組件）
上述兩個點擊懸浮彈窗效果的區別在于：第一個效果為同樣的關閉位置，而第二個效果為不同的關閉位置。
這次我們對懸浮彈窗的效果做了優化調整，將彈窗出現的效果設置為彈跳出現，讓彈窗效果更加逼真明顯。
用案例1同樣的素材，我們使用新組件制作來看看：
*素材來自時尚芭莎《湊完滿減，我后悔了......》
組件：點擊-懸浮彈窗(彈跳出現,無限次彈出,相同關閉位置)
編號：11793（組件）
該效果使用組件「點擊-懸浮彈窗(彈跳出現,無限次彈出,相同關閉位置)」組合（編號11793）制作而成。
彈跳出現但關閉位置不同的懸浮彈窗組件是「點擊-懸浮彈窗(彈跳出現,無限次彈出,不同關閉位置)」組合（編號11792），因為彈窗是以中心點彈跳，所以使用該組件時背景圖不宜太長，且彈窗圖片主體盡量顯示在中心。
以「點擊-懸浮彈窗(彈跳出現,無限次彈出,相同關閉位置)」（編號：11793 ）為例，我們一起來看看是如何制作的吧？
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊-懸浮彈窗(彈跳出現,無限次彈出,相同關閉位置)
編號：11793（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「彈出|彈窗」-「懸浮彈窗」分類中找到「點擊-懸浮彈窗(彈跳出現,無限次彈出,相同關閉位置)」組合，或者直接在搜索框中搜索組合編號11793，點擊選擇。
第2步：上傳圖片素材
刪除示例圖片后，在頁面右側點擊「+」號，上傳背景圖和多張彈窗圖。
注意：所有圖片的尺寸應保持一致，上傳的第一張必須為背景圖，其他為彈窗圖。
彈窗圖應為png格式（為了使彈窗在觸發時可以和背景明顯區隔，也可以給彈窗圖加一個半透明的黑色背景）：
第3步：設置觸發區域
在編輯區域雙擊圖片，開始調整點擊觸發的區域。
觸發區域設置窗口，第一張顯示背景圖，在背景圖上我們要確定的是點擊彈出彈窗的觸發區域，按倒序拖動色塊到指定位置，調整大小即可。
接著設置彈窗的關閉觸發區域：點擊下一張并拖動相應的紅色色塊到指定位置，調整觸發大小。
調整完畢后，點擊空白處退出設置。
第4步：設置動畫參數
右側滑動滑桿調整彈窗彈出動畫時間和彈窗初始尺寸倍數。
彈窗初始尺寸倍數越小，彈窗彈跳出現的效果越明顯。
第5步：導入公眾號后臺
該組件不支持在編輯器內直接預覽，內容編輯完成后繼續點擊最右側「預覽草稿」掃描二維碼在手機預覽，效果滿意后接著點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）