端午图文还没做的小伙伴，赶紧戳这里：《端午节SVG交互图文案例合集》

今天再和大家单独看一篇上汽大众的端午节图文，它的一大特点是打开图文后，会有一条线自动绘制各种形状并不断向下延伸，引导读者视线阅读，兼具美学与功能性。

*GIF录自上汽大众《端午 | 拆「线」找猛料》

早在去年就跟大家发过一篇线条延伸同时展开的效果教程，详见《线条轨迹接展开，这种排版不用代码就能来！》。

上汽大众这篇，不同之处是线条延伸同时，是一张张图片跟随浮现的效果。

今天教大家用 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小助手安装和使用教程》中导入功能的「导入代码」部分。

● SVG 黑科技交互排版👇🏻

 

iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。