“大众这篇端午长长长长长线条排版，怎么做啊？”
端午图文还没做的小伙伴，赶紧戳这里：《端午节SVG交互图文案例合集》
今天再和大家单独看一篇上汽大众的端午节图文，它的一大特点是打开图文后，会有一条线自动绘制各种形状并不断向下延伸，引导读者视线阅读，兼具美学与功能性。
*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步：导入公众号后台
内容编辑完毕后，点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
