本期教程墨刀大神@Yan's World 分享~

在app交互里，我们经常会看到类似的滤镜切换效果，如下图

这个神奇的效果用墨刀实现起来很简单。这次，yan's world录制了视频为大家讲解其中奥秘。

视频观看地址，请戳：ins滤镜切换效果

小墨也在这里贴上了文字版步骤，方便大家练习。

1.   创建尺寸为iphone8plus（414x736）的原型。准备3张不同滤镜样式的素材。
2.  删除状态栏和标题栏
3. 新建3个母版，命名为，母版1、2、3，将3张图片素材（尺寸：414x736）分别拖入3个母版中。x、y轴都设置为0、0，宽x高为414x736
4. 将这三个母版拖入到页面设计区，堆叠在一起。将这三个母版x、y轴都设置为0、0。（小技巧：自11月20日更新之后，可以框选中这三个母版，直接一次性将x、y轴设置为0、0）
5. 新建状态，在状态2里，将顶层母版的宽度设置为0。也就是说从默认状态→状态2，顶层母版的宽度由414→0。
6. 预览效果：添加全局手势，默认状态通过全局手势跳转到状态2，动效时长设置为0.75。（喏，现在你已经可以预览到一部分神奇的效果啦）
7. 接着，在状态2的基础上，新建状态3。 在状态3里，我们把第二层的母版宽度设置为0。然后将状态2链接到状态3，动效时长仍然设置为0.75
8. 将点击变为手势切换：在状态1、2里，将全局手势设置为左滑，状态3到状态2的链接里，将全局手势设置为右滑。因为状态2既能左滑也能右滑，所以再增加一个全局状态，在状态2里，将新增的全局状态设置为右滑，链接到状态1。（这里是视频为了方便一步步演示的做法，学会的同学不妨一开始就加上两个全局状态，左滑右滑更666）
9.   添加底部切换tab。这里跟制作微信底部导航栏是一样的，不了解的同学可以点击教程学习。

如果是第一次接触墨刀这款软件的同学，也无需担心学不会。墨刀的一大特点就是上手简单，无门槛。大家可以扫描下方二维码，学习《墨刀产品原型设计全攻略》课程，两个小时就能学完哦！这个周末，充实自己学起来~