前言
Hello！欢迎来到Axure 9 实战案例教程专栏。
本次课程我们继续来学习一下，动态面板的应用。前一篇我们讲到了导航栏的背景设计，通过学习如何实现导航栏背景的100%宽度，相信大家已经掌握了一些动态面板的妙用；本篇我们在动态面板的基础上，增加一些其他交互，难度开始提高了哦。
那么本篇我们就来讲解一下，如何在APP发布界面实现开关键盘？我们先来看一下完成效果图：
完成效果图
大家可以看到，当折叠键盘时，文本域变高、添加位置向下移；当展开键盘时，文本域复原、添加位置复位。下面来给大家讲解一下实现的步骤。
第一步：设置键盘区域为动态面板
为了节省时间，这里提前把发布界面初稿准备好了，包括页头、文本域、添加位置、工具栏、折叠按钮、键盘。
发布界面初稿
首先我们将左侧工具栏切换到概要（这是便于后面步骤中动态面板的编辑），然后在画布上选中键盘和工具栏的所有元件，点击右键，在弹出菜单中，选择转换为动态面板。
选中键盘和工具栏，右键选择转换为动态面板
第二步：添加动态面板的State 2
首先在左侧概要中，找到动态面板的State 1，点击重复状态，拷贝一个状态；然后点击State 2，在动态面板中，选中工具栏区域，将该区域拖到页面的底部；再然后删除键盘，并将折叠按钮垂直翻转一下。
点击重复状态，拷贝一个状态
拖动工具栏区域至页面底部
删除键盘，并垂直翻转折叠按钮
第三步：设置动态面板的交互
前两步我们绘制了两个状态的动态面板，接着就是要给它们添加交互事件了。首先回到动态面板的State 1，点击选中折叠按钮，在右侧工具栏的交互中，依次点击新建交互单击时设置面板状态_动态面板_State 2。
选中State 1的折叠按钮，点击新建交互_单击时_设置面板状态_动态面板_State 2
这里的交互是指，当单击折叠按钮时，设置动态面板的状态为State 2；下面我们依照同样方法，来设置动态面板的状态切换为State 1。
在左侧栏的概要中，找到动态面板的State 2，点击折叠按钮，在右侧工具栏的交互中，依次点击新建交互单击时设置面板状态_动态面板。
选中State 2的折叠按钮，点击新建交互_单击时_设置面板状态_动态面板
第四步：设置添加位置的交互
上一步我们已经实现了键盘的开关效果，但是还没完哦，为了追求交互体验的仿真效果，接着就要设置文本域和添加位置的交互了。
首先回到State 1，查看一下键盘的高度，后面将会用到这个高度数值，是222；然后点击选中折叠按钮，在右侧工具栏的交互中，点击添加动作，再依次点击移动_添加位置，在移动的 Y 栏填上键盘的高度（即222）。
查看State1的键盘高度 (即222)
选中折叠按钮，再点击添加动作
设置添加位置下移222
这里的交互是指，当单击折叠按钮时，添加位置垂直向下移动222像素；接着就是依照同样的方法，使元件能够复原位置了。
我们再回到State 2，同样点击选中折叠按钮，在右侧工具栏的交互中，点击添加动作，再依次点击移动_添加位置，在移动的 Y 栏填上键盘的负高度（即-222）。
选中State 2的折叠按钮，设置添加位置上移222
第五步：设置文本域的交互
首先回到动态面板的State 1，点击选中折叠按钮，在右侧工具栏的交互中，点击添加动作，再依次点击设置尺寸_文本域，在 H 栏上增加文本域的高度，即460+222=682。
选中State 1的折叠按钮，点击添加动作
设置文本域的尺寸为375×682
这里的交互是指，当单击折叠按钮时，文本域的尺寸变为375×682（即增高至682），接着就是依照同样的方法，使元件能够复原高度了。
我们回到State 2，还是点击选中折叠按钮，在右侧工具栏的交互中，点击添加动作，再依次点击设置尺寸_文本域，可以看到尺寸是原值，直接点击确定。
选中State 2的折叠按钮，点击添加动作，设置文本域的尺寸为原值
结语
OK了，通过以上五个步骤，一个APP发布界面的键盘开关效果就绘制完成了，你学会了吗？
左为State 1 的交互，右为State 2 的交互
相关课件
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包材料：
https://item.taobao.com/item.htm?id=631599964711
（默林如斯原创出品，未经许可，禁止转载，侵权必究）
转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！查看全部教程 >>
网友评论