點擊，作畫！
同樣的一個組件，卻能實現很多不同且有意思的玩法，這就是創意的魅力啊。
在文章《？？？？？？？？？》中給大家介紹過一些例子，今天咱們再來看一個平平無奇的組件「點擊-切換圖片(多觸發區)」（編號：11514）。
利用該組件點擊不同觸發區切換的圖片可以疊加的原理，我們可以用它來實現上色作畫、找不同等玩法。
點擊上色作畫：
*素材來自中原銀行《多彩生活，就要領“紅”包享福“綠”！》
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
也有將觸發區放在下方的：
*素材來自LEXUS雷克薩斯認證二手車《留住秋色》
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
還有點擊找不同：
*素材來自中國政府網《找不同大比拼，哪里變了？》
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
當然也別忘了它最基本的用法，在一張底圖上，點擊不同觸發區顯現對應的背景透明的圖片。相比單個觸發區的點擊切換圖片，用它來實現下方效果省去了切圖的麻煩。
*素材來自FOTILE方太《方太集成烹飪中心入選……》
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
相信大家還能制作出更多的創意效果，下面以點擊上色作畫的效果為例，一起看下組件的使用方法吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「點擊」-「普通切換」分類中找到「點擊-切換圖片(多觸發區)」組件，或者直接搜索組件編號11514，點擊選擇。
第2步：上傳圖片素材
點擊右側「換圖」按鈕上傳背景圖，點擊「+」號上傳切換圖。所有圖片尺寸需保持一致。
注意，為了讓切換圖在顯示時不相互覆蓋影響，切換圖素材需為PNG格式的背景透明圖片，畫面內容互不重疊。
第3步：調整觸發區域
雙擊編輯區圖片，調出觸發區域調整窗口。每個序號圖片代表觸發區及對應的切換圖。
拖拽序號圖片到背景圖的指定位置，調整完畢后點擊「保存設置并退出」。
第4步：調整動畫參數
拖動右側底部動畫時間的滑桿調整圖片切換的時間。
點擊最右側「預覽草稿」可隨時預覽效果。
第5步：導入公眾號后臺
效果滿意后點擊「同步至微信后臺」同步到自己的公眾號就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）