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