【每周一练】5分钟制作出APP抽屉式导航交互动效

大家好，从今天起，UI妹儿【每周一练】正式开始，U妹将和要学习的小伙伴们一起进行AE、交互动效设计、插画设计、2.5D插画设计等方面的练习，想一起学习的小伙伴可以加入进来，我们一起学习！

今天U妹先给大家做一个APP抽屉式导航交互动效设计练习，先来看来最终的交互效果

效果图抽屉式导航交互效果

1、 操作步骤

第1步：打开protopie，这个交互效果是用protopie软件做的，软件下载地址：http://www.protopie.cn/download/

Protopie软件介绍：

原文中此处为链接，暂不支持采集

第2步：点击新建Pie文件按钮，选择界面尺寸（因为我的界面尺寸是1242x2208px，所以选择8 Plus）

第3步：在菜单栏，点击插入-图层-图片，插入所需要的图片素材，并将图片移动到相应的位置

第4步：先搞清楚交互原理：点击导航图标——导航页面从左侧进入，并且首页呈现遮罩层，然后点击遮罩层区域，导航页面还原；知道交互原理后，可见我们需要新建一个遮罩层，填充为黑色，将透明度设置为0，并将遮罩层调整到导航图标上层。

第5步：添加交互效果，为导航图标添加交互点击事件，添加触发条件：选择单击（选择导航按钮图标）—添加：移动（在属性区域选择：导航页面，X轴移动设置为：0，持续事件：0.3S）—添加：透明度（选择mask图层，透明度设置为50%）

我们先来看下预览：

第6步：再次添加交互效果，为遮罩层添加交互点击事件，可以让导航页回位；点击添加触发条件：选择单击（选择遮罩层）—添加：移动（在属性区域选择：导航页面，X轴移动设置为：-250，持续事件：0.3S）—添加：透明度（选择mask图层，透明度设置为0）

添加完毕后整个效果就完成了，我们再来看下预览效果：

第7步：我们也可以在手机上查看交互效果，安装protopie player APP，扫码后即可在手机上预览交互效果

我们也可以将交互效果，导出为MP4视频格式，也可以将交互效果上传到云端，分享链接给团队人员查看。

2、 交作业方式

截止时间：5月5日（周六）22:00截止

作业形式：可将最终交互效果（用GIF、链接、视频格式）发送给UI妹儿公众号，我会在后台给予点评和指点。

备注：请以 “作业名称+昵称”给作品命名，然后发送给UI妹儿公众号！

3、 素材+源文件获取

素材+源文件获取方式：下载素材+源文件

当然你也可以用你自己做的设计稿，来完成这次作业。

5分钟设计出抽屉式导航动效素材+源文件地址  密码：u0p0

#UI妹儿【每周一练】——每周进步一点点#