汉堡按钮html写法,ProtoPie 详解

原标题：ProtoPie 详解 — 汉堡按钮制作

每周一期的 ProtoPie 详解教程又来啦，上期马克笔设计留学的MUzi老师主要介绍了 ProtoPie 的交互动作原理《ProtoPie详解 — 交互动作》，从这期开始MUzi老师将为大家单独介绍具体动效的制作，这期的主题是——汉堡按钮的制作。

汉堡按钮是非常常见的按钮，由于它的样子非常像汉堡所以被称为汉堡按钮。如今汉堡按钮的样子不再是单纯的三条线组成，所以汉堡按钮变成一类导航形式的统称，代表点击按钮打开侧边抽屉式菜单这类导航形式。

生活中常用的应用中经常有汉堡按钮的应用，下面以滴滴为例来讲解它的形式。点击左上角的按钮从左向右打开侧边菜单栏，同时右边出现一个灰色遮罩(右图)，点击遮罩部分菜单消失返回主页面。

接下来就是上述效果的制作过程啦！

倒入

界面素材在Sketch中已经做好，所以我直接从Sketch中倒入素材。大家需要提前制作好一个主界面和一个菜单栏即可。

制作遮罩层

遮罩层指的是当菜单从左向右打开时，同时右边出现的灰色遮罩。我们需要做一个和界面一样大的灰色矩形作为遮罩，并且把他的透明度调为0。

制作动效

点击汉堡按钮为它添加触发- 单击，单击下面为菜单栏添加动作 – 移动，「移动至」的坐标一般将菜单栏拖进界面中看她的坐标是多少直接输入即可，这样移动的动作就完成了，也就是当点击汉堡按钮时，菜单栏移动进入屏幕。

接下来是遮罩层透明度变化的动作，这个动作和菜单栏移动进入屏幕是同时发生的所以在「移动」动作下面添加一个「透明度」动作即可。接下来在「透明度变至」处输入变化后的遮罩层透明度即可，我这里调整到了百分之50。

这样单击按钮，菜单按钮从左向右打开的动效就做好了，下面来制作菜单收回去的效果。

选择遮罩层，为他添加一个「单击」的触发，并且在单击下面为菜单栏添加动作 – 「移动」，「移动至」的坐标是菜单最开始的位置，我这里是 x：-236，y：0 。同时遮罩的透明度再变回 0，操作和上面一样，在「移动」动作下面添加一个「透明度」动作即可。

这样一个完整的汉堡按钮效果就制作完成了，下面是完整的动作栏，如果你和我一样那么恭喜你成功了。

左后看一下效果

文章作者：MUzi

南安普敦大学交互设计硕士

擅长交互设计与用户体验相关专业辅导和课程知识体系建立

任何关于院校和作品集的问题

欢迎随时和马克君沟通

知无不言，言无不尽返回搜狐，查看更多

责任编辑：

汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作相关推荐

android led闪烁功能,详解Android应用层制作LED指示灯
详解Android应用层制作LED指示灯在Java应用层修改LED指示灯的颜色,这个花了我半天时间, 才实现该功能! public class LEDActivity extends Activit ...
iTextSharp 使用详解用C#制作PDF文件全攻略
iTextSharp 使用详解&用C#制作PDF文件全攻略 http://blog.csdn.net/gatr/article/details/278173 转载于:https://www.c ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
java按钮权限控制_详解Spring Security 中的四种权限控制方式
Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Se ...
python中递归函数写法_详解python中递归函数
函数执行流程 def foo1(b,b1=3): print("foo1 called",b,b1) def foo2(c): foo3(c) print("foo2 c ...
swift 拖动按钮_Swift - 单元格滑动按钮库SwipeCellKit使用详解1（基本用法）
在之前的两篇文章中我分别介绍了如何使用 iOS8和 iOS11提供的相关代理方法,来实现 tableView单元格滑动事件按钮: 但它们局限性还是比较大的,前者只能实现尾部按钮,且按钮只能使用文字无法 ...
pyzabbix 删除触发器_zabbix设置邮件报警, Zabbix常用Key值， zabbix触发器表达式详解， zabbix制作自己模板...
zabbix设置邮件报警方法一:说明此方法,会产生中文乱码问题第一步:首先安装mailx组件并配置好能够通过三方邮箱发送邮件 yum -y install mailx 然后编辑mailx的配置文件 ...
do{...}while(0)；写法用途详解
在一些项目代码中,有时会遇到这样的代码: do{... }while(0); 我当时的反应大概是这样的实在是有点无解这种写法,说实话的确没看出来有什么用,这跟不加这个有什么不同吗? 后经查询资料才发 ...
props写法_详解Vue内部怎样处理props选项的多种写法
开发过程中,props 的使用有两种写法: // 字符串数组写法 const subComponent = { props: ['name'] } // 对象写法 const subComponent ...

汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作

汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作相关推荐

最新文章

热门文章