《老司机教你做交互第二期》
效果篇
我可以学到什么篇
①几乎所有的下拉刷新效果你都可以做出
②知道动态面板制作的妙用
③学会简单的函数，通过元件的坐标执行一些命令
④幽默感
1.分析
首先分析一下闲鱼下拉刷新的交互
一共有三种状态：下拉刷新、松开刷新、加载中
让我们一起来分析一下这三种状态
下拉刷新
触发条件：页面下拉距离小于A像素时（A自定义看要多少，我们这里定义A=50）
刷新提示：文案“下拉刷新”
动画：鱼眼睛是（· ·）两个点，嘴巴是笑的，鱼鳍上摆
松开刷新
触发条件：页面下拉距离大于等于A像素时
刷新提示：文案“松开刷新”
动画：鱼眼睛是（><），嘴巴是闭着的，鱼鳍下摆
加载中
触发条件：页面下拉距离大于等于A像素时松开
刷新提示：省略号动画
动画：鱼眼睛是（· <），嘴巴是笑着的，鱼鳍下摆
分析完后我们就知道要做些什么了，接下来开始讲解原型绘制部分
2.绘制原型
第一、画出页面
顶部：375*75
页面内容：创建一个矩形，把矩形转为动态面板，这是名称“页面内容”，大小375*592
页面拖动交互：
交互函数设置
拖动面板时，垂直拖动【页面内容】动态面板，当【页面内容】动态面板y值小于125时，移动【页面内容】动态面板到达（0，75）。当【页面内容】动态面板y值大于等于125时，移动【页面内容】动态面板到达（0，125），等待1000ms后，移动至（0，75）
拖动效果展示
第二、画出提示文案和鱼
因为鱼和提示文案是跟谁页面内容移动的，所以我们要在【页面内容】动态面板里添加提示文案和大黄鱼
提示文案
创建一个动态面板命名【提示】，设置三种状态①文本内容：下拉刷新②文本内容：松开刷新③加载中省略号动画
大黄鱼
由于我们只是为了实现效果，所以这个鱼我用钢笔随便画了一下，大家不要在意，重点是动效的实现思路。。。
鱼主要分成几部分：
①左右眼睛：这里我比较懒，直接画椭圆，然后打字，动效设置文本就ok，命名：【左眼】、【右眼】
②嘴巴：动态面板创建两种状态，分别画两种嘴型，命名【嘴巴】
③左右鱼鳍：画一个鱼鳍然后镜像，这里动效主要用旋转，命名：【左手】、【右手】
第三、设置动效
①拖动时：当【页面内容】下拉超过50像素时，即y值≥125，设置【提示】面板改为“松开刷新”状态。左右手上摆，【嘴】面板改为一条线的嘴型状态，左右眼睛设置文本为（> <）。
新建交互【拖动时】-情形1
②拖动结束时：当【页面内容】下拉超过50像素时，即y值≥125，设置【提示】面板改为“加载中”状态。左右手下摆，【嘴】面板改为笑的嘴型状态，左右眼睛设置文本为（· <）。
新建交互【拖动结束时】-情形1
③考虑到怎么让提示文案和大黄鱼回到初始状态
新建交互【拖动时】-情形1
完成这三个交互后，让我们来看看效果：
这时候我们发现还有省略号跳动的动效，这只需要用动态面板就可以实现，创建一个动态面板，命名控制，添加两个状态，设置页面载入时设置动态面板向后循环，循环间隔400ms，以下是动态面板交互设置
看看最终效果
好了，教程就到这里，其实为了不侵犯肖像权，我是故意把鱼画得这么丑的，大家应该知道我基本功很强。有不会的步骤可以
关注公众号：Axure原型武士，回复“闲鱼下拉刷新”即可获得原型文件，看看源文件里的参数。
没有我Axure画不出的交互，大家说出任何交互，我做教学，下期再会~我是奥斯特洛夫老司机
