GQ《紅了》相似效果，自動平滑展開是怎么做的？
在《GQ〈紅了〉刷屏，藍(lán)了綠了白了也來了！》一文的7個自動展開式SVG圖文案例中，自動展開的效果分為兩種：
一種是自動層層展開，每展開一段會停頓一下再繼續(xù)展開下一段；
一種是自動平滑展開，從頭到尾展開過程沒有任何停頓。
另外在展開過程中我們還會看到文字不同的動效，從素材中可以看出這些動效有的是代碼實現(xiàn)的，而有的其實是動圖。
多變的文字動效因為較為復(fù)雜，目前用編輯器是實現(xiàn)不了的，需要專業(yè)的技術(shù)手寫代碼定制。
而如果僅僅是自動層層展開或自動平滑展開交互，并且文字動效制作成了動圖，用 iPaiban Pro 黑科技編輯器就能實現(xiàn)。
自動層層展開的教程見今天的頭條，自動平滑展開比如新聞聯(lián)播的《那一抹白！》和坦克SUV的《什么是越野？》，在這里看教程就可以了。
目前在 iPaiban Pro 中有3種自動展開的效果組合：：自動展開（編號：10863）、自動切換GIF動圖+展開（編號：10059）、自動切換GIF動圖+從頭展開（編號：10387），新聞聯(lián)播和坦克SUV的用「自動展開」組合就行，后面兩個只是多了一個切換GIF動圖的設(shè)置。
下面一起看下用 iPaiban Pro 還原坦克SUV《什么是越野？》案例的過程，大家也可以做起來了。
工具：iPaiban Pro黑科技編輯器，網(wǎng)址：x.iPaiban.com
組合：自動展開
編號：10863（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側(cè)「組合」按鈕，在「花樣展開」分類中找到「自動展開」組合，或者直接搜索組合編號10863，點擊選擇。
第2步：進(jìn)入組合編輯模式，上傳展開前的圖片
點擊編輯區(qū)的「點擊此處配置」，進(jìn)入組合編輯模式。在組合編輯模式中，分為「展開前」和「展開后」兩個區(qū)域。
點擊「展開前」區(qū)域，在右側(cè)點擊「換圖」按鈕上傳展開前圖片。
第3步：設(shè)置展開后的內(nèi)容
展開后的內(nèi)容可以嵌套各種組件。
所以首先要確認(rèn)展開后的內(nèi)容有哪些交互效果，會用到哪些交互組件，然后在左側(cè)依次拖動相應(yīng)組件到展開后區(qū)域組件位中。
因為《什么是越野？》中的文字動效都是動圖，所以我們只需拖動一個「批量無縫圖」組件到組件位中，然后上傳圖片即可。
第4步：設(shè)置展開參數(shù)
點擊右側(cè)紅色小三角符號，可設(shè)置「等待時長」和「展開時長」。
「等待時長」是指用戶打開圖文后多久，圖文會自動展開，「展開時長」即圖文全部展開花費的時長。
預(yù)覽如果發(fā)現(xiàn)沒有完全展開或展開有多余空白，還可以通過「加減展開高度」進(jìn)行調(diào)整。沒有完全展開輸入正數(shù)，展開有多余空白輸入負(fù)數(shù)。
第5步：導(dǎo)入公眾號后臺
一切設(shè)置完畢后 ，點擊頁面左上角的「保存并退出」按鈕退出組合編輯模式，再次預(yù)覽沒有問題，然后點擊首頁右側(cè)「同步至微信后臺」同步至自己的公眾號就可以了。
局部導(dǎo)入可參考：《iPaiban Pro小助手v2.0安裝和使用教程》
如果還想編輯展開的內(nèi)容，可再次點擊「點擊此處配置」進(jìn)入。
制作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)版會員體驗權(quán)，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
● SVG 黑科技交互排版????????·
轉(zhuǎ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條）