點擊消消消消消消消消消消消樂
在昨天兒童節推文《゜○。○゜????。Ｏ°ｏ○。????ｏ゜○。》中，有一個點擊拼圖的小游戲，不少小伙伴嚷著一定讓我出教程
說安排咱就安排。我把它放進來大家再體驗下：
*上方大圖被平均分成左、中、右三列，每一列都有1塊多余的圖片，準確找到3塊多余的圖片并點擊消除，就能將大圖恢復為一張完整的圖案。
其實這個交互在我們2019年為奔馳AMG做的一篇定制圖文中就出現過，大家可以試玩下：
點擊消除的玩法不只是可以點擊拼圖，面對不同主題或熱點，發揮想象力都能找到一些有趣的創意點，比如端午節點擊吃粽子、點擊縮短龍舟等，或者單純在文中大量平鋪不同顏色的色塊，讓用戶點擊消除同一顏色的也是很解壓的一件事情，就像消消樂一樣。
這種效果3年前需要定制，而現在早就用編輯器就可以自己制作了。
iPaiban Pro 黑科技編輯器組件中有一個「消除」分類，里面有3個組件，分別為：點擊-消除圖片（編號：10238）、連續點擊-消除圖片（編號：10233）和點擊-消除拼圖(三列)（編號：10874）。
「點擊-消除圖片」和「連續點擊-消除圖片」組件一行只能設置消除一張，點擊粽子試試：
它們配合「多列布局」組合還可以做出非常豐富的交互效果，大家可以探索一下。
而前面兩個案例一行可以消除三張的用「點擊-消除拼圖(三列)」組件就可以實現。
以第1個兒童節點擊拼圖為例，一起看下制作教程吧。
工具：iPaiban Pro黑科技編輯器，網址：x.iPaiban.com
組件：點擊-消除拼圖(三列)
編號：10874（組件）
第1步：選擇組件
點擊編輯器左側「組件」按鈕，在「消除」分類中找到「點擊-消除拼圖(三列)」組件，或者直接搜索編號10874，點擊選擇。
第2步：上傳圖片素材
①先說下素材怎么切分的。
我們將完整的素材圖導入Ps中，在左側找到「切片工具」，然后在圖片上右鍵選擇「劃分切片」。
接著在設置框中輸入劃分切片數，垂直劃分為3個，水平劃分數量可以根據圖片的長度來設置。
切分好后點擊菜單欄「文件」-「導出」-「導出為 Web 所用格式（舊版）」保存就可以了，所有切片將會保存在一個 images 文件夾中。
②回到編輯器中上傳圖片。
分別點擊頁面右側左、中、右三列的「+」號按切片在原圖的擺放位置上傳圖片。此時編輯區顯示的是一張拼合的完整圖片。
然后我們再在每列分別上傳插入相同數量的干擾圖片就可以了。
第3步：調整動畫時間
頁面右側最下方的「動畫時間」為點擊后圖片消失的動畫時間，一般保持默認即可，也可根據自己的需要調整。
第4步：導入公眾號后臺
點擊最右側「預覽草稿」可隨時預覽效果，效果滿意后繼續點擊「導入微信后臺」就能開始導到公眾號了。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）哦。
● SVG 黑科技交互排版????????
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）