Apple的自由滑動(dòng)SVG交互，教程來(lái)了！
咱們先看效果：
這是 Apple 最新推送的一篇圖文《不就是一手好字嘛，你上 iPad 你也行》，里面有個(gè)自由滑動(dòng)的交互，模擬了在 iPad 畫(huà)畫(huà)操作屏幕的效果，不少人來(lái)問(wèn)編輯器能否實(shí)現(xiàn)。
可以！
i排版推送的開(kāi)啟7月會(huì)員日活動(dòng)的圖文《↓→←↑》中正好也用到了這個(gè)交互。
在編輯器中搜索關(guān)鍵詞「自由滑動(dòng)」可看到全部相關(guān)組件。
名稱中的列數(shù)表示滑動(dòng)的整張大圖被切分了幾列，比如 Apple 這篇按照如下切圖就是3列，應(yīng)選擇組件11613制作。
需注意的是，該交互為固寬效果，也就是寬度固定，不會(huì)隨屏幕大小自適應(yīng)，在PC網(wǎng)頁(yè)和公眾號(hào)后臺(tái)編輯頁(yè)面顯示會(huì)亂，在大屏幕手機(jī)上會(huì)顯得比使用其交互的圖片窄一些。
不過(guò)不用擔(dān)心，仔細(xì)閱讀下面的教程，你也可以制作出和 Apple 一樣的效果。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：自由滑動(dòng)(三列)
編號(hào)：11613（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「滑動(dòng)」-「自由滑動(dòng)」分類(lèi)中找到「自由滑動(dòng)(三列)」組件，或者直接搜索組件編號(hào)11613，點(diǎn)擊選擇。
第2步：上傳圖片素材
該效果滑動(dòng)范圍由第一張滑動(dòng)圖決定，組件要求所有滑動(dòng)圖尺寸一致。如需上傳背景圖，背景圖尺寸也應(yīng)與滑動(dòng)圖一致。
點(diǎn)擊右側(cè)「換圖」按鈕上傳背景圖。點(diǎn)擊「+」號(hào)按列上傳切分好的滑動(dòng)圖。
因?yàn)樽杂苫瑒?dòng)為固寬效果，在大屏幕手機(jī)上會(huì)顯得比使用其交互的圖片窄一些，背景圖的作用是可以拉平與其他交互的圖片寬度。
如果圖文中單獨(dú)使用該效果可不上傳背景圖；如果上傳背景圖，背景圖分為兩種情況，對(duì)應(yīng)滑動(dòng)圖需作不同的設(shè)計(jì)。
①純色背景圖：對(duì)應(yīng)滑動(dòng)圖的圖片邊緣顏色應(yīng)與背景圖統(tǒng)一（示例），否則會(huì)因?yàn)樽杂苫瑒?dòng)的固寬特性讓兩側(cè)露出的背景圖影響效果，如下：
②非純色背景圖：對(duì)應(yīng)滑動(dòng)圖應(yīng)像 Apple 這篇一樣為透明底（示例），否則也會(huì)影響效果。
第3步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊最右側(cè)「預(yù)覽草稿」預(yù)覽效果，效果滿意后點(diǎn)擊「同步至微信后臺(tái)」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃描二維碼預(yù)覽在公眾號(hào)的效果。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(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條）