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