聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程在图文里从头跑到尾,心心念的直线轨迹移动教程来了!
在图文里从头跑到尾,心心念的直线轨迹移动教程来了!2024-07-10 11:00

 

                                               


每当有重要内容需要推送时,不少品牌都青睐于轨迹移动式的排版效果。


轨迹移动的排版,不只看上去给人一种高大上的感觉,而且实际作用明显。



轨迹移动可以很好地将内容串联在一起,引导读者的阅读方向和阅读节奏,让读者按我们规划的时间节奏完成阅读,不错过任何重要信息,同时提高阅读完成率。


之前给大家介绍过线条式轨迹移动教程),今天再给大家介绍一个元素直线轨迹移动


先看效果案例:


 



*GIF分别录自GIVENCHY纪梵希艾伯维abbvie清风Breeze锦鲤青年公众号


点击一下指定元素,元素向前直线运动,到达指定位置后自动停止。这就是元素直线轨迹移动,现在我们用 iPaiban Pro 编辑器就可以轻松实现。


下面请旋转横置手机,感受一下清风Breeze品牌实际应用效果:


 



*素材来自清风Breeze《清风与你一“骑”践行绿色低碳……》

组件:点击-切换GIF直线移动(可拼接背景)

编号:10229(组件)


还有个小细节,案例中点击前自行车是静止不动的,点击后自行车向前移动的同时自身车轮也动了起来。整个效果显得更加生动形象。


下面一起看下制作教程吧。


详细教程:

工具:iPaiban Pro黑科技编辑器,网址:SVG.iPaiban.com
组件:点击-切换GIF直线移动(可拼接背景)
编号:10229(组件)


第1步:选择组件


登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「轨迹移动」分类中找到「点击-切换GIF直线移动(可拼接背景)」组件,或者直接在搜索框中搜索组件编号10229,点击选择。



第2步:上传图片素材


图片素材分为三部分:背景图、点击前移动图和点击后移动图。


背景图的长度决定轨迹移动的距离。背景图如果太长,可以切开分段上传。



点击前移动图一般是移动主体GIF的第一帧图片,点击后移动图是移动主体GIF图。下面两张图片为前文案例中的点击前移动图和点击后移动图。


 




要注意的是,两张移动图的宽度需与背景图宽度保持一致,且高度小于背景图。


第3步:调整动画时间


动画时间,即点击后主体从开始到结束移动花费的时间。时间越长,移动越慢。



第4步:调整点击触发区域


编辑区双击背景图,在弹出的窗口中,通过调整红色色块的位置和大小调整点击触发的区域。



第5步:导入到公众号后台

点击「预览草稿」可在编辑器中即时预览效果,检查没有问题后点击同步至微信后台就可以了。



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

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

如需定制 SVG 黑科技排版,请点此查看定制流程和套餐,低至500元/篇。

 

                                                           
                                                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
聚焦SVG排版技巧与创意应用的实用手册合集
首页组件教程
在图文里从头跑到尾,心心念的直线轨迹移动教程来了!2024-07-10 11:00

 

                                               


每当有重要内容需要推送时,不少品牌都青睐于轨迹移动式的排版效果。


轨迹移动的排版,不只看上去给人一种高大上的感觉,而且实际作用明显。



轨迹移动可以很好地将内容串联在一起,引导读者的阅读方向和阅读节奏,让读者按我们规划的时间节奏完成阅读,不错过任何重要信息,同时提高阅读完成率。


之前给大家介绍过线条式轨迹移动教程),今天再给大家介绍一个元素直线轨迹移动


先看效果案例:


 



*GIF分别录自GIVENCHY纪梵希艾伯维abbvie清风Breeze锦鲤青年公众号


点击一下指定元素,元素向前直线运动,到达指定位置后自动停止。这就是元素直线轨迹移动,现在我们用 iPaiban Pro 编辑器就可以轻松实现。


下面请旋转横置手机,感受一下清风Breeze品牌实际应用效果:


 



*素材来自清风Breeze《清风与你一“骑”践行绿色低碳……》

组件:点击-切换GIF直线移动(可拼接背景)

编号:10229(组件)


还有个小细节,案例中点击前自行车是静止不动的,点击后自行车向前移动的同时自身车轮也动了起来。整个效果显得更加生动形象。


下面一起看下制作教程吧。


详细教程:

工具:iPaiban Pro黑科技编辑器,网址:SVG.iPaiban.com
组件:点击-切换GIF直线移动(可拼接背景)
编号:10229(组件)


第1步:选择组件


登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「轨迹移动」分类中找到「点击-切换GIF直线移动(可拼接背景)」组件,或者直接在搜索框中搜索组件编号10229,点击选择。



第2步:上传图片素材


图片素材分为三部分:背景图、点击前移动图和点击后移动图。


背景图的长度决定轨迹移动的距离。背景图如果太长,可以切开分段上传。



点击前移动图一般是移动主体GIF的第一帧图片,点击后移动图是移动主体GIF图。下面两张图片为前文案例中的点击前移动图和点击后移动图。


 




要注意的是,两张移动图的宽度需与背景图宽度保持一致,且高度小于背景图。


第3步:调整动画时间


动画时间,即点击后主体从开始到结束移动花费的时间。时间越长,移动越慢。



第4步:调整点击触发区域


编辑区双击背景图,在弹出的窗口中,通过调整红色色块的位置和大小调整点击触发的区域。



第5步:导入到公众号后台

点击「预览草稿」可在编辑器中即时预览效果,检查没有问题后点击同步至微信后台就可以了。



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

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

如需定制 SVG 黑科技排版,请点此查看定制流程和套餐,低至500元/篇。

 

                                                           
                                                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
i排版_iPaiban_客服微信扫码加客服领会员
联系邮箱:i@playhudong.com
i排版_iPaiban_公众号i排版_iPaiban_知乎i排版_iPaiban_微博i排版_iPaiban_哔哩哔哩
京ICP备14043207号-2 京公网安备11010802023272号
小黄人科技@2025 | 服务协议