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

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

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

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

先看效果案例：

 

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

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

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

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

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

第1步：选择组件

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

第2步：上传图片素材

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

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

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

 

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

第3步：调整动画时间

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

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

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

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

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

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

● SVG 黑科技交互排版👇🏻

 

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