Apple的自由滑動SVG交互，教程來了！
咱們先看效果：
這是 Apple 最新推送的一篇圖文《不就是一手好字嘛，你上 iPad 你也行》，里面有個自由滑動的交互，模擬了在 iPad 畫畫操作屏幕的效果，不少人來問編輯器能否實現。
可以！
i排版推送的開啟7月會員日活動的圖文《↓→←↑》中正好也用到了這個交互。
在編輯器中搜索關鍵詞「自由滑動」可看到全部相關組件。
名稱中的列數表示滑動的整張大圖被切分了幾列，比如 Apple 這篇按照如下切圖就是3列，應選擇組件11613制作。
需注意的是，該交互為固寬效果，也就是寬度固定，不會隨屏幕大小自適應，在PC網頁和公眾號后臺編輯頁面顯示會亂，在大屏幕手機上會顯得比使用其交互的圖片窄一些。
不過不用擔心，仔細閱讀下面的教程，你也可以制作出和 Apple 一樣的效果。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：自由滑動(三列)
編號：11613（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「滑動」-「自由滑動」分類中找到「自由滑動(三列)」組件，或者直接搜索組件編號11613，點擊選擇。
第2步：上傳圖片素材
該效果滑動范圍由第一張滑動圖決定，組件要求所有滑動圖尺寸一致。如需上傳背景圖，背景圖尺寸也應與滑動圖一致。
點擊右側「換圖」按鈕上傳背景圖。點擊「+」號按列上傳切分好的滑動圖。
因為自由滑動為固寬效果，在大屏幕手機上會顯得比使用其交互的圖片窄一些，背景圖的作用是可以拉平與其他交互的圖片寬度。
如果圖文中單獨使用該效果可不上傳背景圖；如果上傳背景圖，背景圖分為兩種情況，對應滑動圖需作不同的設計。
①純色背景圖：對應滑動圖的圖片邊緣顏色應與背景圖統一（示例），否則會因為自由滑動的固寬特性讓兩側露出的背景圖影響效果，如下：
②非純色背景圖：對應滑動圖應像 Apple 這篇一樣為透明底（示例），否則也會影響效果。
第3步：導入公眾號后臺
點擊最右側「預覽草稿」預覽效果，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）