GQ《紅了》相似效果，自動平滑展開是怎么做的？
在《GQ〈紅了〉刷屏，藍了綠了白了也來了！》一文的7個自動展開式SVG圖文案例中，自動展開的效果分為兩種：
一種是自動層層展開，每展開一段會停頓一下再繼續展開下一段；
一種是自動平滑展開，從頭到尾展開過程沒有任何停頓。
另外在展開過程中我們還會看到文字不同的動效，從素材中可以看出這些動效有的是代碼實現的，而有的其實是動圖。
多變的文字動效因為較為復雜，目前用編輯器是實現不了的，需要專業的技術手寫代碼定制。
而如果僅僅是自動層層展開或自動平滑展開交互，并且文字動效制作成了動圖，用 iPaiban Pro 黑科技編輯器就能實現。
自動層層展開的教程見今天的頭條，自動平滑展開比如新聞聯播的《那一抹白！》和坦克SUV的《什么是越野？》，在這里看教程就可以了。
目前在 iPaiban Pro 中有3種自動展開的效果組合：：自動展開（編號：10863）、自動切換GIF動圖+展開（編號：10059）、自動切換GIF動圖+從頭展開（編號：10387），新聞聯播和坦克SUV的用「自動展開」組合就行，后面兩個只是多了一個切換GIF動圖的設置。
下面一起看下用 iPaiban Pro 還原坦克SUV《什么是越野？》案例的過程，大家也可以做起來了。
工具：iPaiban Pro黑科技編輯器，網址：x.iPaiban.com
組合：自動展開
編號：10863（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「自動展開」組合，或者直接搜索組合編號10863，點擊選擇。
第2步：進入組合編輯模式，上傳展開前的圖片
點擊編輯區的「點擊此處配置」，進入組合編輯模式。在組合編輯模式中，分為「展開前」和「展開后」兩個區域。
點擊「展開前」區域，在右側點擊「換圖」按鈕上傳展開前圖片。
第3步：設置展開后的內容
展開后的內容可以嵌套各種組件。
所以首先要確認展開后的內容有哪些交互效果，會用到哪些交互組件，然后在左側依次拖動相應組件到展開后區域組件位中。
因為《什么是越野？》中的文字動效都是動圖，所以我們只需拖動一個「批量無縫圖」組件到組件位中，然后上傳圖片即可。
第4步：設置展開參數
點擊右側紅色小三角符號，可設置「等待時長」和「展開時長」。
「等待時長」是指用戶打開圖文后多久，圖文會自動展開，「展開時長」即圖文全部展開花費的時長。
預覽如果發現沒有完全展開或展開有多余空白，還可以通過「加減展開高度」進行調整。沒有完全展開輸入正數，展開有多余空白輸入負數。
第5步：導入公眾號后臺
一切設置完畢后 ，點擊頁面左上角的「保存并退出」按鈕退出組合編輯模式，再次預覽沒有問題，然后點擊首頁右側「同步至微信后臺」同步至自己的公眾號就可以了。
局部導入可參考：《iPaiban Pro小助手v2.0安裝和使用教程》
如果還想編輯展開的內容，可再次點擊「點擊此處配置」進入。
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
● SVG 黑科技交互排版????????·
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）