




端午图文还没做的小伙伴,赶紧戳这里:《端午节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小助手安装和使用教程》中导入功能的「导入代码」部分。




































端午图文还没做的小伙伴,赶紧戳这里:《端午节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小助手安装和使用教程》中导入功能的「导入代码」部分。





































小黄人科技@2025 | 服务协议