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