這樣切換圖片超優(yōu)雅！教你制作蘋果5種點(diǎn)擊移動(dòng)式切換
蘋果的圖文，篇篇都是SVG排版。
蘋果圖文中點(diǎn)擊切換圖片效果，卻幾乎篇篇不一樣。
今天我們就來欣賞一下蘋果圖文中5種點(diǎn)擊移動(dòng)式切換效果，每種效果都是優(yōu)雅又高級(jí)。效果下面附有相應(yīng)的教程。
第1種，可返回的兩列觸發(fā)全屏左滑：
*素材來自Apple《繽紛派，超能派，有請(qǐng) 2 款新 iPad。》
組件：Apple同款-兩列觸發(fā)全屏左滑(有返回觸發(fā)區(qū))
編號(hào)：11340（組件）
第2種，點(diǎn)擊左移擴(kuò)大切換圖片：
*素材來自Apple《一個(gè)“文”字，看懂實(shí)況文本。》
組件：Apple同款-點(diǎn)擊左移擴(kuò)大切換圖片,點(diǎn)擊返回(有觸發(fā)區(qū))
編號(hào)：11540（組件）
教程：《Apple同款左移放大切換，簡(jiǎn)簡(jiǎn)單單就實(shí)現(xiàn)！》
第3種，可返回的點(diǎn)擊左右往返滑動(dòng)切換：
*素材來自Apple《這塊健康神器，幫你各種比心。》
組件：Apple同款-點(diǎn)擊-左右往返滑動(dòng)切換
編號(hào)：10581（組件）
教程：《可以往返的點(diǎn)擊滑動(dòng)切換，蘋果的這個(gè)效果咋實(shí)現(xiàn)？》
第4種，點(diǎn)擊向左移出+左滑(自動(dòng)對(duì)齊)：
*素材來自Apple《出門玩啦！手持這套絕活，旅行全程罩住你。》
組件：Apple同款-點(diǎn)擊向左移出+左滑(自動(dòng)對(duì)齊)
編號(hào)：11702（組件）
教程：《“先點(diǎn)后滑，Apple這個(gè)排版效果怎么做的啊？”》
第5種，是蘋果前不久推送的一篇圖文中的效果，也是這5種中最為簡(jiǎn)潔的一個(gè)，可返回的點(diǎn)擊左移切換圖片：
*素材來自Apple《春運(yùn)記不住座位號(hào)？iPhone 靈動(dòng)島和鎖屏來冒泡。》
組件：Apple同款-點(diǎn)擊左移切換圖片,點(diǎn)擊返回(有觸發(fā)區(qū))
編號(hào)：11846（組件）
下面一起看下教程。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：Apple同款-點(diǎn)擊左移切換圖片,點(diǎn)擊返回(有觸發(fā)區(qū))
編號(hào)：11846（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，在「點(diǎn)擊」分類中找到「Apple同款-點(diǎn)擊左移切換圖片,點(diǎn)擊返回(有觸發(fā)區(qū))」組件，或者直接搜索組件編號(hào)11846，點(diǎn)擊選擇。
第2步：上傳圖片素材
點(diǎn)擊右側(cè)兩個(gè)「換圖」按鈕分別上傳切換前和切換后的圖片。兩張圖片尺寸需保持一致。
第3步：設(shè)置觸發(fā)區(qū)域
雙擊編輯區(qū)上傳的切換前圖片，拖動(dòng)紅色色塊調(diào)整點(diǎn)擊切換的觸發(fā)區(qū)。
雙擊編輯區(qū)上傳的切換后圖片，拖動(dòng)紅色色塊調(diào)整點(diǎn)擊返回的觸發(fā)區(qū)。
第4步：調(diào)整動(dòng)畫參數(shù)
拖動(dòng)右側(cè)底部動(dòng)畫時(shí)間的滑桿調(diào)整圖片移動(dòng)的時(shí)間。
點(diǎn)擊最右側(cè)「預(yù)覽草稿」可隨時(shí)掃碼預(yù)覽效果。
第5步：導(dǎo)入公眾號(hào)后臺(tái)
效果滿意后點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
轉(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條）