instagram滤镜切换效果

  • A+
所属分类:Instagram资讯

实现起来也非常简单
本期教程墨刀大神@Yan's World 分享~
在app交互里,我们经常会看到类似的滤镜切换效果,如下图

这个神奇的效果用墨刀实现起来很简单。这次,yan's world录制了视频为大家讲解其中奥秘。
视频观看地址,请戳: ins滤镜切换效果
小墨也在这里贴上了文字版步骤,方便大家练习。
创建尺寸为iphone8plus(414x736)的原型。准备3张不同滤镜样式的素材。
删除状态栏和标题栏
新建3个母版,命名为,母版1、2、3,将3张图片素材(尺寸:414x736)分别拖入3个母版中。x、y轴都设置为0、0,宽x高为414x736
将这三个母版拖入到页面设计区,堆叠在一起。将这三个母版x、y轴都设置为0、0。(小技巧:自11月20日更新之后,可以框选中这三个母版,直接一次性将x、y轴设置为0、0)
新建状态,在状态2里,将顶层母版的宽度设置为0。也就是说从默认状态→状态2,顶层母版的宽度由414→0。
预览效果:添加全局手势,默认状态通过全局手势跳转到状态2,动效时长设置为0.75。(喏,现在你已经可以预览到一部分神奇的效果啦)
接着,在状态2的基础上,新建状态3。 在状态3里,我们把第二层的母版宽度设置为0。然后将状态2链接到状态3,动效时长仍然设置为0.75
将点击变为手势切换:在状态1、2里,将全局手势设置为左滑,状态3到状态2的链接里,将全局手势设置为右滑。因为状态2既能左滑也能右滑,所以再增加一个全局状态,在状态2里,将新增的全局状态设置为右滑,链接到状态1。(这里是视频为了方便一步步演示的做法,学会的同学不妨一开始就加上两个全局状态,左滑右滑更666)
添加底部切换tab。这里跟制作微信底部导航栏是一样的,不了解的同学可以点击 教程学习 。
如果是第一次接触墨刀这款软件的同学,也无需担心学不会。墨刀的一大特点就是上手简单,无门槛。大家可以扫描下方二维码,学习《墨刀产品原型设计全攻略》课程,两个小时就能学完哦!这个周末,充实自己学起来~

weinxin
客服微信:fensi115
微博推广,抖音短视频推广,Facebook专页粉丝推广,Instagram粉丝推广
avatar

发表评论

您必须登录才能发表评论!