线条轨迹接展开，这种排版不用代码就能来！

原创赞收藏评论

举报 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步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。

继续点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。