連續(xù)點(diǎn)擊旋轉(zhuǎn)切換，能調(diào)角度和快慢！
之前小編在《新年新效果，2021旋轉(zhuǎn)一下變2022！》中講過(guò)旋轉(zhuǎn)切換圖片的效果，講得都是在圖片的某一角為圓點(diǎn)旋轉(zhuǎn)切換，并且只能點(diǎn)擊切換一次。
最近許多小伙伴希望可以有以圖片下邊中點(diǎn)為圓點(diǎn)旋轉(zhuǎn)切換的，并且可以連續(xù)點(diǎn)擊切換，就像下方 Weekend Max Mara 一篇圖文中的這樣：
當(dāng)然可以！
現(xiàn)在 iPaiban Pro 編輯器上線了多個(gè)相關(guān)組件，旋轉(zhuǎn)方向可以選擇順時(shí)針或逆時(shí)針，每個(gè)方向的包含以上、下、左、右4個(gè)中點(diǎn)為圓點(diǎn)旋轉(zhuǎn)的，還可以調(diào)整觸發(fā)區(qū)、旋轉(zhuǎn)快慢以及旋轉(zhuǎn)角度。
觸發(fā)區(qū)和旋轉(zhuǎn)快慢大家都應(yīng)該明白，旋轉(zhuǎn)角度是什么？有什么用？
舉個(gè)例子，下方鞋子在靜止?fàn)顟B(tài)下可以看到前后切換圖，調(diào)大旋轉(zhuǎn)角度后前后切換圖就不會(huì)露出了，有時(shí)候我們也可以故意露出前后切換圖，效果可能更好一些，這就是旋轉(zhuǎn)角度的作用。
組件：連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(下、有觸發(fā)區(qū))
編號(hào)：11283（組件）
旋轉(zhuǎn)角度45度
組件：連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(下、有觸發(fā)區(qū))
編號(hào)：11283（組件）
旋轉(zhuǎn)角度60度
再試試以圖片上邊中點(diǎn)為圓點(diǎn)旋轉(zhuǎn)切換的：
組件：連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(上、有觸發(fā)區(qū))
編號(hào)：11282（組件）
旋轉(zhuǎn)角度45度
另外還有組件「 連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(左、有觸發(fā)區(qū))」（編號(hào)：11284）、「連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(右、有觸發(fā)區(qū))」（編號(hào)：11285）等。
更多相關(guān)組件大家可以在「點(diǎn)擊」-「旋轉(zhuǎn)切換」分類中找到，或者直接搜索關(guān)鍵詞「連續(xù) 旋轉(zhuǎn)」。
一起看下制作教程：
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com
組件：連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(下、有觸發(fā)區(qū))
編號(hào)：11283（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，在「點(diǎn)擊」-「旋轉(zhuǎn)切換」分類中找到「連續(xù)點(diǎn)擊-圖片順時(shí)針旋轉(zhuǎn)切換(下、有觸發(fā)區(qū))」組件，或者直接在搜索框中搜索組件編號(hào)11283，點(diǎn)擊選擇。
第2步：上傳圖片素材
點(diǎn)擊右側(cè)「換圖」按鈕上傳背景圖，點(diǎn)擊右側(cè)「+」號(hào)上傳多張切換圖：
背景圖和所有切換圖尺寸需保持一致。
第3步：設(shè)置觸發(fā)區(qū)域和旋轉(zhuǎn)效果
雙擊編輯區(qū)的圖片，在彈出的窗口中紅色色塊表示觸發(fā)區(qū)域，可任意調(diào)整位置和大小。
我們將紅色色塊調(diào)整至合適區(qū)域后，點(diǎn)擊「下一張」繼續(xù)調(diào)整下一張的觸發(fā)區(qū)，如果所有圖片的觸發(fā)區(qū)相同，調(diào)整好第一張后直接點(diǎn)擊「為所有圖片的應(yīng)用此配置」即可。
在右側(cè)可以調(diào)整旋轉(zhuǎn)切換的時(shí)間以及角度：
點(diǎn)擊頁(yè)面最右側(cè)「預(yù)覽草稿」可隨時(shí)預(yù)覽效果。
第4步：導(dǎo)入公眾號(hào)后臺(tái)
效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
局部導(dǎo)入可參考：《iPaiban Pro小助手v2.0安裝和使用教程》
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開(kāi)，即可開(kāi)始注冊(cè)并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員體驗(yàn)權(quán)，以及22個(gè)常用必備組件的大禮包（1年）。隨禮包附贈(zèng)千元優(yōu)惠券，每單最高立降500元。
有獎(jiǎng)互動(dòng)
你還想要什么交互效果？
留言區(qū)聊一聊
精選放出就送SVG案例庫(kù)高級(jí)會(huì)員1個(gè)月
（案例庫(kù)收錄案例數(shù)已達(dá)10W+）
● SVG 黑科技交互排版????????
·
轉(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條）