線條軌跡接展開，這種排版不用代碼就能來！

原創贊收藏評論

舉報 2024-05-28

掃描,分享朋友圈

點擊圖片，出現一條細線向下延伸，同時圖文展開顯現更多內容。

上周i排版的5月會員日圖文《這條線好長長長長長長長長長長……》這種排版效果，是怎么做的？

這種效果可以很好地吸引讀者注意力，引導讀者視線隨線條軌跡閱讀圖文。
之前單獨定制這樣一篇圖文一般需要幾千甚至上萬元，而現在大家用 iPaiban Pro 黑科技編輯器就能實現啦。
制作同款效果需要用到的是「點擊-線條軌跡+展開」組合（編號：11893）。在編輯器中搜索關鍵詞「軌跡」可以看到其他類似的效果組件。

和其他效果相比，這種線條軌跡類的排版，我們在制作時多了重要的一步：用Ai軟件繪制線條軌跡并提取線條代碼。

有Ai軟件基礎的同學看下教程自己就能操作，不懂Ai的同學，這一步可以直接交給設計師同事。
以圖文《這條線好長長長長長長長長長長……》為例，我們一起如何制作的吧。

一

使用 Ai 繪制線條軌跡并導出代碼

工具：Adobe Illustrator（簡稱Ai）第1步：導入圖片并鎖定
打開 Ai，點擊左上角菜單欄「文件」-「打開」，導入一張完整的圖片。（這張圖片是指線條軌跡覆蓋的整個畫面，導入后以它為背景繪制線條。）

接著點擊菜單欄「窗口」-「圖層」，打開圖層窗口。因為稍后我們要給圖片繪制線條，為了防止描繪過程中圖片偏移，如下所示，我們先將該圖片在圖層中鎖定。

第2步：用鋼筆給繪制線條
在左側工具欄選擇「鋼筆」工具，設置描邊顏色、粗細，不填充。在圖片上選擇一個起始點，開始給畫面繪制線條。

注意，在 Ai 里給線條設置的顏色、粗細、起點和終點，決定著最終排版中軌跡的顏色、粗細、起點和終點。

另外因為排版時圖片拼接原因，最終圖文中軌跡終點停留的位置可能略低于在Ai中繪制的位置。如果最后預覽圖文時覺得影響效果，可以在Ai中把軌跡終點向上繪制一些再導出軌跡長度和代碼。
第3步：查看線條軌跡長度
線條軌跡繪制完畢后，點擊選中線條。
接著點擊菜單欄「窗口」-「文檔信息」，在「文檔信息」面板點擊右上角的三條杠，選擇「對象」。這時就會看到路徑的長度，也就是線條軌跡的長度。

把這個長度記錄下來備用，或者直接填寫在編輯器「軌跡長度」的輸入框中。

第4步：導出線條軌跡的SVG代碼
點擊菜單欄「文件」-「存儲為」，在彈出的窗口中選擇格式為「SVG(svg)」，接著點擊「存儲」。

在出現的窗口中點擊「更多選項」，然后把圖像位置設置為「鏈接」，CSS屬性設置為「演示文稿屬性」后，點擊「SVG代碼」。

此時會看到代碼中有一個幾乎全是數字的<path>標簽，這個就是我們需要的線條軌跡代碼啦。

完整復制這段<path>標簽代碼保存到一個txt文檔中備用，或者直接粘貼在編輯器「軌跡代碼」的輸入框中。

二

使用 iPaiban Pro 編輯器排版

工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com組合：點擊-線條軌跡+展開編號：11893（組合） 第1步：選擇組合
登錄 iPaiban Pro 黑科技編輯器后，點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「點擊-線條軌跡+展開」組合，或者直接搜索組合編號11893，點擊選擇。

第2步：進入組合編輯模式
如下所示，點擊「編輯組合」，進入組合編輯模式。

在組合編輯模式中，我們需要分別設置展開前和展開后的內容。
第3步：設置「展開前」內容
①上傳圖片：點擊「展開前」區域，接著點擊右側「換圖」按鈕，上傳軌跡開始前顯示的圖片。

②設置參數：輸入在Ai中獲取的軌跡代碼、軌跡長度，調整軌跡延伸動畫的時間。

③調整觸發區：雙擊上傳的圖片，在彈出的窗口中設置點擊觸發的區域。

第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：

第5步：設置展開參數
點擊右側紅色小三角符號，可設置展開動畫的時長。展開時長最好小于軌跡動畫時長。
展開高度一般無需調整，但當在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候可以通過「加減展開高度」使其恰好展開。

第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。

繼續點擊最右側「預覽草稿」掃碼預覽效果，效果滿意后接著點擊「同步至微信后臺」就可以了。

使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。