一键换场景！点击三层移动切换教程来了

当图片层数变多，每层图片再有不同的透明度关系，常常会出现比较有意思的排版效果。

最近经常被问到的一个效果，就是这样的。点击试试：

*素材来自OSIM傲胜《6色智能沙发待挑选，测出你的隐藏性格！》

组件：点击-三层移动切换

编号：11882（组件）

这个排版由3层图片组成，点击后前景层和背景层图片移动切换为另外的两张前景层和背景层图片，中间层图片保持不动。

因为前景图和背景图切换前后的差异化设计，给人一种一键换场景的特效感觉，很是吸睛有趣。

该效果使用 iPaiban Pro 黑科技编辑器的「点击-三层移动切换」组件（编号：11882）即可制作，并且组件提供了4种移动方向可以选择，除了前面向左移动，还有向右、向上和向下的。

点击向右移动切换：

*素材来自OSIM傲胜《6色智能沙发待挑选，测出你的隐藏性格！》

组件：点击-三层移动切换

编号：11882（组件）

点击向上移动切换：

*素材来自优活家《“出逃”冬日只需一杯优活家大麦茶》

组件：点击-三层移动切换

编号：11882（组件）

点击向下移动切换：

*素材来自GQ实验室《好喜欢会空气投篮的人，谁懂？》

组件：点击-三层移动切换

编号：11882（组件）

以点击向上移动为例，一起看下制作教程吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器

组件：点击-三层移动切换

编号：11882（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「点击」分类中找到「点击-三层移动切换」组件，或者直接搜索组件编号11882，点击选择。

第2步：上传图片素材

依次点击右侧「换图」按钮分别上传中间图、初始前景图、切换前景图、初始背景图和切换背景图5张图片。5张图片尺寸需保持一致。

第3步：设置动画参数

根据需求在上传图片位置的下方，可选择图片移动切换的方向，默认方向为向上。接着调整移动动画的时间。

点击最右侧「预览草稿」预览效果，根据效果可随时进行调整。

第4步：导入公众号后台

效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。

使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。