拼拼拼拼拼拼拼拼拼圖
拼圖游戲，大家應(yīng)該都玩過。
當(dāng)最后1張拼圖擺入其中，看著拼好的圖片真的有種大大的滿足感！
今天把拼圖游戲給你搬到圖文里，輕輕滑動，就能拼圖成功。
感受一下：
*素材來自阿維塔《「拼」個(gè)車搭子，出發(fā)！》
組合：滑動拼圖切換+展開
編號：11915（組合）
在圖片的指定區(qū)域手指輕輕滑動一下，滑塊便會滑動到吻合位置。接著拼圖切換為另一張圖片，同時(shí)圖文展開顯示更多內(nèi)容。
該效果使用 iPaiban Pro 黑科技編輯器的「滑動拼圖切換+展開」組合（編號：11915）即可實(shí)現(xiàn)。
雖然名為拼圖，但它的玩法可不止拼圖一種，比如還可以用作滑動解鎖手機(jī)：
*素材來自MLB美妝《? 點(diǎn)擊接聽潮人熱線》
組合：滑動拼圖切換+展開
編號：11915（組合）
更多創(chuàng)意玩法等待大家發(fā)掘啦。
下面以以第1個(gè)效果為例，一起來看看如何實(shí)現(xiàn)吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組合：滑動拼圖切換+展開
編號：11915（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組合」按鈕，在「花樣展開」-「特殊效果+展開」分類中找到「滑動拼圖切換+展開」組合，或者直接在搜索框中搜索組合編號11915，點(diǎn)擊選擇。
第2步：進(jìn)入組合編輯模式
如下所示，點(diǎn)擊「編輯組合」，進(jìn)入組合編輯模式。
在組合編輯模式中，我們需要設(shè)置展開前和展開后的內(nèi)容。
第3步：設(shè)置展開前的內(nèi)容
①點(diǎn)擊展開前區(qū)域，在右側(cè)分別上傳「滑動前背景」、「滑動前滑塊」和「滑動后」3張圖片。3張圖片尺寸需保持一致。本文案例對應(yīng)3張圖片如下：
注意，上傳的「滑動前背景」和「滑動前滑塊」兩張圖片應(yīng)是正好吻合的。
②雙擊展開前區(qū)域上傳的圖片，調(diào)整觸發(fā)區(qū)域。
第4步：設(shè)置展開后的內(nèi)容
「展開后」的內(nèi)容支持嵌套各種組件，需要什么效果就在左側(cè)「組件」分類中找到相應(yīng)的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個(gè)樣式就按照這3步操作。
這里我們拖動一個(gè)「無縫圖」組件到組件位中，并上傳圖片。如下所示：
第5步：設(shè)置動畫參數(shù)
點(diǎn)擊頁面右側(cè)紅色小三角，可設(shè)置拼圖成功后的圖片「切換時(shí)長」和圖文「展開時(shí)長」。
「向左偏移像素」為「滑動前滑塊」圖片的偏移距離，數(shù)值越大，向左偏移越多，數(shù)值為負(fù)，則向右偏移。
展開高度一般無需調(diào)整，但當(dāng)大家在手機(jī)上預(yù)覽時(shí)，如果發(fā)現(xiàn)展開后有多余的空白或者沒有展現(xiàn)出全部內(nèi)容，這時(shí)候可以通過「加減展開高度」使其恰好展開。
第6步：導(dǎo)入公眾號后臺
內(nèi)容編輯完畢后，點(diǎn)擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續(xù)點(diǎn)擊最右側(cè)「預(yù)覽草稿」，效果滿意后點(diǎn)擊「同步至微信后臺」就可以了。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）