




每当有重要内容需要推送时,不少品牌都青睐于轨迹移动式的排版效果。
轨迹移动的排版,不只看上去给人一种高大上的感觉,而且实际作用明显。
轨迹移动可以很好地将内容串联在一起,引导读者的阅读方向和阅读节奏,让读者按我们规划的时间节奏完成阅读,不错过任何重要信息,同时提高阅读完成率。
之前给大家介绍过线条式轨迹移动(教程),今天再给大家介绍一个元素直线轨迹移动。
先看效果案例:
点击一下指定元素,元素向前直线运动,到达指定位置后自动停止。这就是元素直线轨迹移动,现在我们用 iPaiban Pro 编辑器就可以轻松实现。
下面请旋转横置手机,感受一下清风Breeze品牌实际应用效果:
*素材来自清风Breeze《清风与你一“骑”践行绿色低碳……》
组件:点击-切换GIF直线移动(可拼接背景)
编号:10229(组件)
还有个小细节,案例中点击前自行车是静止不动的,点击后自行车向前移动的同时自身车轮也动了起来。整个效果显得更加生动形象。
下面一起看下制作教程吧。
第1步:选择组件
登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「轨迹移动」分类中找到「点击-切换GIF直线移动(可拼接背景)」组件,或者直接在搜索框中搜索组件编号10229,点击选择。
第2步:上传图片素材
图片素材分为三部分:背景图、点击前移动图和点击后移动图。
背景图的长度决定轨迹移动的距离。背景图如果太长,可以切开分段上传。
点击前移动图一般是移动主体GIF的第一帧图片,点击后移动图是移动主体GIF图。下面两张图片为前文案例中的点击前移动图和点击后移动图。
要注意的是,两张移动图的宽度需与背景图宽度保持一致,且高度小于背景图。
第3步:调整动画时间
动画时间,即点击后主体从开始到结束移动花费的时间。时间越长,移动越慢。
第4步:调整点击触发区域
编辑区双击背景图,在弹出的窗口中,通过调整红色色块的位置和大小调整点击触发的区域。
第5步:导入到公众号后台




































每当有重要内容需要推送时,不少品牌都青睐于轨迹移动式的排版效果。
轨迹移动的排版,不只看上去给人一种高大上的感觉,而且实际作用明显。
轨迹移动可以很好地将内容串联在一起,引导读者的阅读方向和阅读节奏,让读者按我们规划的时间节奏完成阅读,不错过任何重要信息,同时提高阅读完成率。
之前给大家介绍过线条式轨迹移动(教程),今天再给大家介绍一个元素直线轨迹移动。
先看效果案例:
点击一下指定元素,元素向前直线运动,到达指定位置后自动停止。这就是元素直线轨迹移动,现在我们用 iPaiban Pro 编辑器就可以轻松实现。
下面请旋转横置手机,感受一下清风Breeze品牌实际应用效果:
*素材来自清风Breeze《清风与你一“骑”践行绿色低碳……》
组件:点击-切换GIF直线移动(可拼接背景)
编号:10229(组件)
还有个小细节,案例中点击前自行车是静止不动的,点击后自行车向前移动的同时自身车轮也动了起来。整个效果显得更加生动形象。
下面一起看下制作教程吧。
第1步:选择组件
登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「轨迹移动」分类中找到「点击-切换GIF直线移动(可拼接背景)」组件,或者直接在搜索框中搜索组件编号10229,点击选择。
第2步:上传图片素材
图片素材分为三部分:背景图、点击前移动图和点击后移动图。
背景图的长度决定轨迹移动的距离。背景图如果太长,可以切开分段上传。
点击前移动图一般是移动主体GIF的第一帧图片,点击后移动图是移动主体GIF图。下面两张图片为前文案例中的点击前移动图和点击后移动图。
要注意的是,两张移动图的宽度需与背景图宽度保持一致,且高度小于背景图。
第3步:调整动画时间
动画时间,即点击后主体从开始到结束移动花费的时间。时间越长,移动越慢。
第4步:调整点击触发区域
编辑区双击背景图,在弹出的窗口中,通过调整红色色块的位置和大小调整点击触发的区域。
第5步:导入到公众号后台





































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