像大風車一樣的旋轉切換，圖片背景一起變！
點擊一下，圖片就像大風車一樣旋轉切換為另一張。
*素材來自Weekend Max Mara《把秋天分享給你》
組件：連續點擊-圖片順時針旋轉切換(下、有觸發區)
編號：11283（組件）
這是之前給大家介紹過的一種連續點擊旋轉切換玩法，點擊后圖片以下邊中點為圓點旋轉切換，看著很有意思。
更有意思的來啦！今天給大家推薦的是連續點擊旋轉切換的一個升級玩法。
再體驗下下面兩個案例：
*素材來自奔馳鑄星培訓《想去哪兒就去哪兒，云旅游安排！》
組件：連續點擊-圖片順時針旋轉切換同時切換背景(下)
編號：11715（組件）
*素材來自五菱商用車《五菱E10「致富小精靈」超級變身show！》
組件：連續點擊-圖片順時針旋轉切換同時切換背景(下)
編號：11715（組件）
有沒有發現有什么區別？
奔馳和五菱這兩個案例，點擊后不僅圖片旋轉切換，而且背景圖也隨之切換，交互效果非常巧妙，讓場景變換更加真實具有沉浸感。
這種效果用 iPaiban Pro 黑科技編輯器的「連續點擊-圖片順時針旋轉切換同時切換背景(下)」組件（編號：11715）輕松實現。
除了以圖片下邊中點旋轉切換的，還有以上、左、右3個方向的，都支持調整觸發區和旋轉快慢。
組件：連續點擊-圖片順時針旋轉切換同時切換背景(上)
編號：11719（組件）
組件：連續點擊-圖片順時針旋轉切換同時切換背景(左)
編號：11720（組件）
組件：連續點擊-圖片順時針旋轉切換同時切換背景(右)
編號：11721（組件）
以五菱的效果為例，一起來看看教程吧！
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：連續點擊-圖片順時針旋轉切換同時切換背景(下)
編號：11715（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「點擊」-「旋轉切換」分類中找到「連續點擊-圖片順時針旋轉切換同時切換背景(下)」組件，或者直接在搜索框中搜索組件編號11715，點擊選擇。
第2步：上傳圖片素材
①上傳圖片：點擊右側「+」號分別上傳背景圖和切換圖。每張圖片尺寸保持一致，切換圖數量需要與背景圖保持一致，切換圖可以為GIF動圖。
②調整圖片順序：上下拖動圖片可調整圖片順序。
第3步：設置觸發區域
雙擊編輯區的圖片，在彈出的窗口中紅色色塊表示觸發區域，可任意調整位置和大小。
第4步：調整動畫參數
右側滑動滑桿調整圖片旋轉切換的時間，下方可選擇不同的旋轉角度。
第5步：導入公眾號后臺
該組件不支持在編輯器內直接預覽，內容編輯完成后繼續點擊最右側「預覽草稿」掃描二維碼在手機預覽，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）