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