元旦回来，不少小伙伴才开始忙着做年终回顾。
没有灵感的可以看下这两篇：
2025年终总结破圈案例.wps
有效的年终总结推文，原来都是这样的！
其中小米公司公众号的回看2023：美好的事情已经发生这篇图文排版，在常见的点击展开上加了线条延伸的效果，受到很多小伙伴的青睐。
![]()
*GIF录自小米手机回看2023：美好的事情已经发生
之前单独定制这样一篇图文一般需要几千甚至上万元，不用再找再问了，今天是一篇详细的编辑器排版教程，无需会代码就能实现。
和其他效果相比，这种线条轨迹类的排版，我们在制作时多了重要的一步：用Ai软件绘制线条轨迹并提取线条代码。
![]()
有Ai软件基础的同学看下教程自己就能操作，不懂Ai的同学，这一步可以直接交给设计师同事。
下面看下如何制作吧。为了避免排版出错，请一定注意文字教程中提到的注意事项哦。
使用 Ai 绘制线条轨迹并导出代码
工具：Adobe Illustrator（简称Ai，不是人工智能的那种Ai哦）打开 Ai，点击左上角菜单栏「文件」-「打开」，导入一张完整的图片。（这张图片是指线条轨迹覆盖的整个画面，导入后以它为背景绘制线条。）接着点击菜单栏「窗口」-「图层」，打开图层窗口。因为稍后我们要给图片绘制线条，为了防止描绘过程中图片偏移，如下所示，我们将该图片在图层中锁定。1）导入Ai中的图片尺寸，应和在编辑器中上传的图片尺寸整体一致。
*如果图片太长，因为电脑和软件配置原因，导入后图片尺寸自动缩小，也要保持图片比例一致。
2）导入图片后，将Ai中画板大小和图片调整为一致。
在左侧工具栏选择「钢笔」工具，设置描边颜色、粗细，不填充。在图片上选择一个起始点，开始给画面绘制线条。1）线条轨迹不可间断。
2）在 Ai 中给线条设置的颜色、粗细、起点和终点，决定着最终排版中轨迹的颜色、粗细、起点和终点。
3）因为排版时图片拼接原因，最终图文中轨迹终点停留的位置可能略低于在Ai中绘制的位置。如果最后预览图文时觉得影响效果，可以在Ai中把轨迹终点向上绘制一些再导出轨迹长度和代码。
接着点击菜单栏「窗口」-「文档信息」，在「文档信息」面板点击右上角的三条杠，选择「对象」。这时就会看到路径的长度，也就是线条轨迹的长度。把这个长度记录下来备用，或者直接填写在编辑器「轨迹长度」的输入框中。点击菜单栏「文件」-「存储为」，在弹出的窗口中选择格式为「SVG(svg)」，接着点击「存储」。
在出现的窗口中点击「更多选项」，然后把图像位置设置为「链接」，CSS属性设置为「演示文稿属性」后，点击「SVG代码」。此时会看到代码中有一个几乎全是数字的<path>标签，这个就是我们需要的线条轨迹代码啦。完整复制这段<path>标签代码保存到一个txt文档中备用，或者直接粘贴在编辑器「轨迹代码」的输入框中。如果遇到步骤1的注意事项中提到的情况，因为电脑和软件配置原因，导入 Ai 后图片尺寸自动缩小。那么就需要再用到以下一句代码：
<g style="transform: scale(倍数)">SVG代码</g>
把这句代码中的「倍数」，换为图片实际尺寸➗在Ai中的尺寸得出的数值，比如图片实际宽为750，在Ai中宽500，那么倍数值就是1.5。
「SVG代码」换为在Ai提取的轨迹代码，然后整体复制粘贴到编辑器中就可以。
使用i排版SVG编辑器排版
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「点击-线条轨迹+展开」组合，或者直接搜索组合编号11893，点击选择。在组合编辑模式中，我们需要分别设置展开前和展开后的内容。①上传图片：点击「展开前」区域，接着点击右侧「换图」按钮，上传轨迹开始前显示的图片。②设置参数：输入在Ai中获取的轨迹代码、轨迹长度，调整轨迹延伸动画的时间。③调整触发区：双击上传的图片，在弹出的窗口中设置点击触发的区域。
「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：点击页面空白处，在右侧可设置展开动画的时长。展开时长最好小于轨迹动画时长，这样随着展开可以一直看到轨迹的头部。展开高度一般无需调整，但当在手机上预览时，如果发现展开后有多余的空白或者没有展现出全部内容，这时候可以通过「加减展开高度」使其恰好展开。内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。继续点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如果需要复杂度比较高的线条轨迹效果，比如中间需要调整速度、暂停继续、加别的效果等，目前仍需要定制实现，可联系二师兄微信：playhudong004
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端谷歌浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。 ![图片]()
iPaiban 团队可提供运营服务、视频制作、GEO、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。
