拖动A时，
if 面板A区域 is over bottom区域
move A with drag x （到底后只能横向拖动了。）
else move A with drag
其他的效果lz按需设置。
本文章主要是为需要的人提供教程以及为自我学习的一种复盘方式。
1.从元件库中拖入一个手机模板。
2.在导航栏和标签栏之间拖入一个动态面板，并将面板名称命名为：外层动态面板。
3.双击 【外层动态面板】，将state1改为：state1-外层动态面板，并双击进入 state1-外层动态面板里面
4.在【 state1外层动态面板】里，拖入一个动态面板，并命名为：内层动态面板。 内层动态面板的长度为所要展示的内容的长度。
5.同理，双击【内层动态面板】后，将state1命名为：state1-内层动态面板，并双击进入【state1-内层动态面板】里面。并拖入自己要展示的内容
6.返回至主页面，单击【外层动态面板】，给它添加“拖动时”用例
7.双击“拖动时”后，点击“移动”，要移动的元件选择【内层动态面板】，移动选为：垂直移动
8.点击“添加边界”，添加2个边界：（1）顶部<=0（2）顶部>=0。当顶部>=0时，需要为其添加函数，点击>=0时的 fx
9.设置变量，点击“添加局部变量”，panel1=元件 外层动态面板；panel2=元件 内层动态面板。panel1，panel2可按自己喜好命名
10.设置函数,设置函数为：[[panel1.height-panel2.height]] 。设置完成后，按f5预览，如果不能实现效果，请务必检查每一个变量名和函数（特别易错，我错了三次）。
注：本教程参考： 阿阿小兰兰 发布的（Axure之上下滑动屏幕实现，原文网址 https://www.jianshu.com/p/dd44f5229c32 。ps：阿阿小兰兰写得特别清楚，从她的教程中本人受益良多）
1、打开Axure工具，在欢迎页面选择“New File”，界面如下：2、右击左边Pages中的Page1，选择Rename，可重命名该页面，我们重命名为“音乐播放页面”。
3、打开我们自己手机中的音乐播放器中的音乐播放页面，截图，做参照用，此处我用的是咪咕音乐，复制截图，粘贴到该page页面中，如图所示：
4、如上图，底色是白色的，此时图片与底色的边界不清晰，我们先修改底色。方法：选中空白部分，点击右侧STYLE中的Color，选择深一点的颜色，边界变清晰，如下图：
5、下面我们比照此图，画出自己的音乐播放页面。首先按住Ctrl+鼠标滚轮下滚，使参照页面都显示在屏幕上，接下来，拖动一个Box1，放在参照图的右边，并调整大小与左图相同，调整时注意把W和H中的小锁解除锁定，如下图。
6、观察参照图片，图片大体可分为如下标出的5部分，分别为歌曲名、专辑图片、歌词、个人设置和进度控制5部分：
7、按住标尺往下拉，在需要标尺标记的部分添加标尺线，如图，需要下拉5次：
8、添加歌曲名称，先拖拽一个Box1到第一个标尺线下，再调整文字的大小、字体和粗细，再修改右侧BORDER下的Thickness为0去掉边框，如下图：
9、接下来添加作者及音效情况，按住键盘上的CTRL键，拖动“兰亭序”这个Box，可复制Box，我们复制出三个来排列好，如下图：
10、先修改作者的文字及样式，修改文字后，再修改其大小、文字颜色和粗细，如下图：
11、再修改音质，涉及文字的大小、文字颜色、粗细和边框，如下图：
12、再修改音效，涉及文字的大小、颜色、粗细和边框，如下图。
注意，这里的文字和边框颜色，如果摸不准可以用拾色器，如下图，点击一下拾色器，再点击有想要的颜色的部分就可以取到了。
这里的边框是圆角的，我们这样调整，选择文本框后，左上角会出现小三角，往里拉小三角即可，如下图。
13、接下来拖动一个image，并调整大小，当做专辑图片
14、再拖动一个H1，输入内容并调整相关参数，当做歌词：
15、接下来拖动圆圈调整大小当做个人设置图标，并设置图标向上对齐和图标间距相等，进度图标同理：
16、拉两条横线，分别作为总进度条和已播放进度，将总进度条调整长度后拉到最下面的标尺线处，已播放进度条设置边框颜色为红色后先放一边：
17、选中全部标尺线删除。将已播放进度条拉至总进度条左侧与总进度条重合。拖动一个圆圈，填充上红色，并调整大小为30*30，拖到已播放进度条尾部。
完成。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）