可以往返的點擊滑動切換，蘋果的這個效果咋實現(xiàn)？
這是普通的左右滑動切換圖片：
組件：單層滑動-左滑
編號：10020（組件）
后來出現(xiàn)了左右滑動切換時可以自動對齊的：
組件：單層滑動-左滑(自動對齊)
編號：10236（組件）
一下子就高級了不少，體驗感也上去了。
左右滑動切換效果如果還想更上一層樓，不如試試蘋果《這塊健康神器，幫你各種比心。》一文中點擊觸發(fā)的吧，支持來回往返點擊，體驗一下：
組件：Apple同款-點擊-左右往返滑動切換
編號：10581（組件）
蘋果原文在此基礎(chǔ)上加了一層鏤空的圓角白色前景圖，使其與產(chǎn)品圓潤的設(shè)計更加匹配：
組件：Apple同款-點擊-左右往返滑動切換
編號：10581（組件）
我們知道使用 iPaiban Pro 編輯器制作普通的左右滑動效果很簡單，選擇相應(yīng)的組件，批量上傳準備好的素材，幾秒鐘做好，而點擊左右往返滑動切換使用 iPaiban Pro 制作起來也是同樣簡單快捷。
一起看下教程吧：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com
組件：Apple同款-點擊-左右往返滑動切換
編號：11581（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側(cè)「組件」按鈕，在「點擊」-「滑動切換」分類中找到「Apple同款-點擊-左右往返滑動切換」組件，或者直接搜索組件編號11581，點擊選擇。
第2步：上傳圖片素材
為了讓大家更好地理解素材結(jié)構(gòu)，該組件設(shè)有默認素材，我們刪除默認素材上傳自己的素材替換即可。
刪除素材后點擊「+」號批量上傳準備好的圖片素材，所有圖片尺寸需保持一致。
點擊「換圖」按鈕上傳前景圖，如無需要可不傳。前景圖也需與前面的滑動圖尺寸一致。
第3步：調(diào)整觸發(fā)區(qū)域
雙擊編輯區(qū)圖片，調(diào)出觸發(fā)區(qū)域調(diào)整窗口。紅色色塊即為觸發(fā)區(qū)，通過拖拽可進行調(diào)整。
前面幾張設(shè)置點擊左滑切換的觸發(fā)區(qū)，最后1張設(shè)置點擊右滑切換的觸發(fā)區(qū)。左滑切換的觸發(fā)區(qū)每張可以設(shè)置不同位置，右滑切換的觸發(fā)區(qū)在每張圖片都是同一位置，即為最后1張圖片上設(shè)置的區(qū)域。
第4步：調(diào)整動畫參數(shù)
按照調(diào)整好的觸發(fā)區(qū)點擊最右側(cè)「預(yù)覽草稿」，手機掃碼預(yù)覽效果（該效果不支持直接在編輯器點擊預(yù)覽）。
根據(jù)預(yù)覽效果調(diào)整圖片切換動畫的時間。
第5步：導(dǎo)入公眾號后臺
效果滿意后點擊「同步至微信后臺」同步到自己的公眾號就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預(yù)覽在公眾號的效果。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標準版會員體驗權(quán)，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）