“大眾這篇長長長長長線條排版，怎么做?。俊?/h1>
端午大家過得咋樣呀？
端午出了不少有優秀的圖文值得參考。
今天和大家單獨看一篇上汽大眾的端午節圖文，它的一大特點是打開圖文后，會有一條線自動繪制各種形狀并不斷向下延伸，引導讀者視線閱讀，兼具美學與功能性。
*GIF錄自上汽大眾《端午 | 拆「線」找猛料》
組件：自動-線條軌跡+圖片浮現
編號：12109（組件）
早在去年就跟大家發過一篇線條延伸同時展開的效果教程，詳見《線條軌跡接展開，這種排版不用代碼就能來！》。
上汽大眾這篇，不同之處是線條延伸同時，是一張張圖片跟隨浮現的效果。
今天教大家用 iPaiban Pro 黑科技編輯器（SVG.iPaiban.com）來制作實現，和其他效果相比，這種線條軌跡類的排版，我們在制作時多了重要的一步：用Ai軟件繪制線條軌跡并提取線條代碼。
有Ai軟件基礎的同學看下教程自己就能操作，不懂Ai的同學，這一步可以直接交給設計師同事。
下面一起看下教程吧。
一
使用 Ai 繪制線條軌跡并導出代碼
工具：Adobe Illustrator（簡稱Ai）
之前寫過這一步驟的詳細教程，這里不再贅述，戳：《如何使用 Ai 繪制線條軌跡并導出代碼？》
二
使用 iPaiban Pro 編輯器排版
工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com
組件：自動-線條軌跡+圖片浮現
編號：12109（組件）
第1步：選擇組件
登錄 iPaiban Pro 黑科技編輯器后，點擊編輯器左側「組件」按鈕，在「軌跡移動」分類中找到「自動-線條軌跡+圖片浮現」組件，或者直接搜索組件編號12109，點擊選擇。
第2步：上傳浮現圖片
點擊右側「+」號批量上傳準備好的浮現圖片。所有圖片寬度需保持一致，高度不必一致。
第3步：設置線條軌跡動畫參數
在右側對應位置，輸入在Ai中獲取的線條軌跡代碼、軌跡長度，和軌跡延伸動畫的時間。（獲取方式見前面步驟一「使用 Ai 繪制線條軌跡并導出代碼」，或直接戳《如何使用 Ai 繪制線條軌跡并導出代碼？》）
第4步：設置圖片浮現動畫參數
在輸入框中以「2,4,8,12…」的形式設置圖片浮現時間。
其中每個數字代表對應圖片在打開圖文后浮現的時間點，單位為秒，數字的個數應與浮現圖片數對應。注意數字之間的逗號為英文「,」號。
比如本文上汽大眾的案例中，總共有8張浮現圖片，第1張打開圖文立馬浮現，第2張為打開圖文后的第8秒浮現，第3張在第16秒浮現，第3張在第16秒浮現，第4張在第17秒浮現，第5張在第22秒浮現，第6張在第24秒浮現，第7張在第32秒浮現，第8張在第34秒浮現。便可設置如下：
第5步：導入公眾號后臺
內容編輯完畢后，點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）