GQ《紅了》同款效果，自動層層展開是怎么做的？
GQ《紅了！》的自動層層展開效果，不會代碼能不能做？
在《GQ〈紅了〉刷屏，藍了綠了白了也來了！》一文中，給大家整理過7個最近很火的自動展開式SVG圖文案例，這幾天又出現了一些新的，包括：
央視新聞《來了來了！》
中國平安《給深圳》
北京越野《酷了！》
SAP天天事《企業要“韌性”，未來才會贏》
之前的7個加上現在的5個共12篇自動展開式圖文的素材，我們為大家打包下載好了，添加下方微信回復關鍵詞【自動展開】即可領取。
這些自動展開案例中，自動展開的效果有兩種：一種是自動層層展開，比如GQ《紅了！》、百度《藍了！》；一種是自動平滑展開，比如新聞聯播《那一抹白！》、坦克SUV的《什么是越野？》。
下方圖示左為自動層層展開，右為自動平滑展開：
▲左：GQ實驗室 右：坦克SUV
下面是兩個用序號色塊圖片制作的Demo演示，左為自動層層展開，右為自動平滑展開，或許更能看出兩者的區別。左邊每展開一段會停頓一下再繼續展開下一段，右邊從頭到尾展開過程沒有任何停頓。
自動平滑展開（組合：自動展開，編號：10863）很早用 iPaiban Pro 黑科技編輯器就能制作，教程見今日次條。現在GQ《紅了》同款效果自動層層展開用 iPaiban Pro 編輯器也能制作了。
自動層層展開效果在技術上并不是太難，只是因為素材較多導致展開數量多，對程序員來說這項技術活一下子就成了體力活。
而使用 iPaiban Pro 黑科技編輯器制作，得益于其批量上傳調整圖片的功能，可以說大大解放我們的雙手了。
當然編輯器的不足之處就是所有圖片停留和展開的時間只能統一調整，少了些人工的細致，大家可以根據自己的需求選擇使用。
在GQ《紅了！》和百度《藍了！》的展開之中，還包含了一些文字動效，這些動效也是代碼實現的，用編輯器暫時無法制作，替代方案是做成動圖。
接下來以還原百度《藍了！》圖文為例，感受一下 iPaiban Pro 的高效率制作流程：
*點贊該視頻號視頻或小紅書同款視頻，憑截圖添加玉兔微信（ID：playhudong15），可領取SVG案例庫30天高級會員哦。
詳細教程：
工具：iPaiban Pro黑科技編輯器，網址：x.iPaiban.com
組件：自動層層展開
編號：11273（組件）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，直接搜索組件名稱或編號11273，點擊選擇。
第2步：上傳圖片素材
我們不需要調整展開高度，每一張圖片系統會自動識別展開一次，展開高度由圖片高度決定。
點擊右側「+」號可批量上傳準備好的圖片素材。
如果發現圖片順序錯誤，可上下拖動圖片進行調整。
第3步：調整展開效果參數
在上傳圖片下方，提供有「每張停留時間」和「動畫時間」的設置，「動畫時間」為每張圖片的展開時間，拖動滑桿即可調整。
第4步：導入公眾號后臺
點擊頁面最右側「預覽草稿」可隨時預覽效果，效果滿意后接著點擊「同步至微信后臺」同步到自己的公眾號就可以了。
局部導入可參考：《iPaiban Pro小助手v2.0安裝和使用教程》
該組件如果你9.9元先成為MINI會員，可以8.5折拿下，立省89.7元；
如果你是標準版會員，可以5折購買；
如果你是高級版和高級團隊版可以免費使用；
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
有獎互動
點贊本文視頻號視頻
或小紅書同款視頻（賬號：i排版SVG編輯器）
憑截圖添加玉兔微信（ID：playhudong15）
可領取SVG案例庫30天高級會員哦
● SVG 黑科技交互排版????????·
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）