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