“哇！迪桑特這種點擊穿梭式展開的排版，怎么做啊？”
欸！？怎么就2024最后一個月了？
好想穿越時光，看看自己過去都干了點啥????
穿越時光是辦不到了，但我們可以用「點擊穿梭式放大消失+點擊展開」的交互，帶大家回顧過去，非常適合周年慶、年終總結的時候使用。
點擊體驗一下：
*素材來自i排版編輯器《不敢想公眾號排版可以這么快！》
組合：點擊穿梭式放大消失+點擊展開
編號：11934（組合）
iPaiban Pro 黑科技編輯器4周年這個活動推文，開頭是逐步點擊穿梭切換在過去四年的關鍵圖文、交互和產品之間，最后點擊收縮展開具體的周年慶活動介紹，給人以穿越時間的感覺。
再來看一個用迪桑特素材實現的例子，更顯高級：
*素材來自迪桑特DESCENTE《吳彥祖：在破風鏡頭之外》
組合：點擊穿梭式放大消失+點擊展開
編號：11934（組合）
下面以上面的排版為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊穿梭式放大消失+點擊展開
編號：11934（組合）
第1步：選擇組合
登錄 iPaiban Pro 黑科技編輯器后，點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「點擊穿梭式放大消失+點擊展開」組合，或者直接搜索組合編號11934，點擊選擇。
第2步：進入組合編輯模式
如下所示，點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，我們需要設置展開前和展開后的內容。
第3步：設置展開前的內容
①點擊展開前區域，然后在右側點擊「換圖」按鈕依次上傳背景圖和點擊提示圖，需留意所有圖片尺寸保持一致。
②設置展開方式和點擊放大次數。本文的案例為收縮展開，點擊放大次數為3。
③點擊「＋」號依次上傳放大圖組和最后一組圖片，需留意每一組放大圖片數量必須為3張。
上傳的素材圖如下圖所示：
第4步：設置展開后的內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作。
這里我們拖動一個「批量無縫圖」組件到組件位中，并上傳圖片。如下所示：
第5步：設置動畫參數
點擊頁面右側紅色小三角，可設置「展開時長」和圖文「加減展開高度」。
展開高度一般無需調整，但當大家在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候可以通過「加減展開高度」使其恰好展開。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）