“有沒有像微信派、GQ這種縮小放大切換效果啊？”
這兩天微信派和GQ實驗室的兩個案例，來問用編輯器怎么做的比較多。
微信派《明天，微信之約》：
GQ實驗室《官宣：已出〇》：
這兩個案例的交互目前用編輯器都制作不了，需要定制實現，不過這種放大縮小的效果倒是可以給大家推薦幾個用編輯器就能制作的。
之前介紹過一些：
《Apple的〈別走開〉 視頻，不斷放大的效果如何用排版實現？》
用今天要推薦的兩個帶展開的效果簡單制作了兩個Demo，連續點擊下方圖片體驗下：
組合：連續點擊-圖片放大+展開(設置展開觸發區)
編號：11412（組合）
組合：連續點擊-圖片縮小+展開(設置展開觸發區)
編號：11414（組合）
效果1，圖片連續點擊放大，最后1次點擊展開；效果2，圖片連續點擊縮小，最后1次點擊展開。在 iPaiban Pro 編輯器中，我們可以設置連續點擊放大或縮小的次數，以及每次放大縮小的動畫時間，靈活性較高。
這些效果可以用作什么創意玩法就看大家的啦，下面以連續放大展開為例，一起看下制作教程：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com
組合：連續點擊-圖片放大+展開(設置展開觸發區)
編號：11412（組合）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「放大/縮小+展開」分類中找到「連續點擊-圖片放大+展開(設置展開觸發區)」組件，或者直接在搜索框中搜索組合編號11412，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。展開前設置圖片連續點擊放大效果，展開后可以任意嵌套各種效果。
第3步：設置「展開前」內容
①點擊「展開前」區域，在右側點擊「換圖」按鈕上傳準備好的圖片。
圖片尺寸沒有要求，但放大倍數越大，圖片應該盡量高清一些。
②分別設置圖片連續點擊次數、最終放大倍數以及單次擴大時間。
③雙擊編輯區，調整點擊觸發的區域。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置展開參數
點擊右側紅色小三角，可以設置展開時長。如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，微信掃碼預覽效果，效果滿意后接著點擊「同步至微信后臺」同步到自己的公眾號就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）