中國(guó)人民銀行的這篇嵌套展開圖文，是怎么做的？
上周中國(guó)人民銀行發(fā)布的一篇SVG交互圖文，用手繪漫畫配合嵌套展開的交互效果演繹了一出《防范非法集資情景喜劇》，有趣又有料，咱們趁熱打鐵，今天就來看看是怎么制作的。
這里給大家直接貼過來：
這篇圖文中一共有6個(gè)展開，其中1個(gè)展開中嵌套著另外5個(gè)平級(jí)展開，這種嵌套展開的效果給人層層遞進(jìn)的感覺，非常適合具有故事性的圖文。
而它制作起來也并不難，因?yàn)樵?iPaiban Pro 黑科技編輯器中有專門的嵌套展開組合，使用它可以很方便地在展開中嵌套展開。
另外你也可以在「品牌時(shí)光機(jī)」SVG案例庫(kù)里搜索找到此文，iPaiban Pro 的高級(jí)版會(huì)員，或者擁有這里面的組件權(quán)限的 iPaiban Pro 用戶點(diǎn)擊「一鍵還原草稿」直接就可以制作同款交互。
一起看下用 iPaiban Pro 制作《防范非法集資情景喜劇》圖文的整個(gè)過程：
i排版黑科技
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com組合：點(diǎn)擊展開(可嵌套展開,固寬)編號(hào)：10875（組合）組合：點(diǎn)擊展開(有觸發(fā)區(qū))編號(hào)：10051（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組合」按鈕，在「嵌套展開」分類中選擇「點(diǎn)擊展開(可嵌套展開,固寬)」組合，或者在組合中直接搜索編號(hào)10875。
第2步：進(jìn)入組合編輯模式
如下所示，點(diǎn)擊「編輯組合」，進(jìn)入組合編輯模式。
在組合編輯模式中，我們需要設(shè)置展開前和展開后的內(nèi)容。
第3步：設(shè)置展開前和展開后的內(nèi)容
展開前的內(nèi)容只有一張圖片，點(diǎn)擊展開前區(qū)域，然后在右側(cè)點(diǎn)擊「換圖」上傳圖片。
設(shè)置展開后的內(nèi)容，總共分為3步：添加組件位-拖動(dòng)組件/組合到組件位中-上傳素材。
每需要一個(gè)交互效果按照這3步走就可以，動(dòng)圖演示：
選擇什么組件/組合大家根據(jù)自己想要的交互效果來定，央行《防范非法集資情景喜劇》圖文在展開中嵌套了5個(gè)展開組合，所以我們需要放置5個(gè)組件位，然后分別拖入「點(diǎn)擊展開(有觸發(fā)區(qū))」組合（編號(hào)：10051），如下所示：
第4步：編輯二級(jí)展開
在展開后的內(nèi)容中拖入點(diǎn)擊展開組合后，接著用同樣的方法在展開中嵌套「全能無縫圖」組件，然后上傳素材即可。
第5步：調(diào)整展開效果的參數(shù)
每一個(gè)展開組合至少可以調(diào)整2個(gè)參數(shù)：展開時(shí)長(zhǎng)和展開高度，點(diǎn)擊右側(cè)紅色小三角可以看到。
展開高度一般無需調(diào)整，但當(dāng)大家在手機(jī)上預(yù)覽時(shí)，如果發(fā)現(xiàn)展開后有多余的空白或者沒有展現(xiàn)出全部?jī)?nèi)容，這時(shí)候就可以通過調(diào)整展開高度使其精準(zhǔn)展開。
第6步：導(dǎo)入公眾號(hào)后臺(tái)
內(nèi)容編輯完畢后，點(diǎn)擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁(yè)面。
效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
局部導(dǎo)入可參考：《iPaiban Pro小助手v2.0安裝和使用教程》
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(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)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）