教程用实现简书微博的下拉刷新效果
⇨⇦
本文从原型设计的角度来探究背后的交互逻辑，研究如何利用经典原型工具Axure实现这样的交互效果。
目前各大应用主要采取两种下拉刷新方式，一种以简书、知乎为代表的内容版块固定的刷新方式，另一种以微博、今日头条为代表的内容版块向下滑动的刷新方式。
一、以简书、知乎为代表的下拉刷新
1.观察交互动作
向下滑动时：刷新按钮缓缓向下垂直移动，并以自身为中心点进行旋转，当向下移动到一定距离时停止移动。
滑动结束时：手指松开屏幕时，刷新按钮消失，刷新按钮的初始位置出现加载按钮，并以自身为中心点进行旋转；旋转结束后，系统更新页面内容，同时在内容的上方出现了一段提示内容更新数量的toast文字，几秒后提示信息消失。
简书交互分析（元件名参照下文）
2.准备元件
首先准备好相关元件，元件素材中需要用到两个动态面板：
第一个动态面板：承载内容，设置3个面板状态，每个状态为不同的内容。为了便于区分内容，本案例中将不同面板内的文字和占位符通过不同的颜色来进行区分。该动态面板命名为＂信息流＂。
第二个动态面板：主要用于处理下滑过程中和下滑结束时，刷新按钮、加载按钮和推荐提示的切换显示，我们将第二个动态面板命名为＂刷新＂，3个状态分别命名为刷新、加载和推荐，默认隐藏该面板。
3.设置交互用例
1).信息流动态面板—设置拖动时用例：
动作1：设置＂刷新＂动态面板的状态为＂刷新＂；
动作2：垂直拖动＂刷新＂动态面板，移动范围在当前元件的Y轴坐标到Y轴坐标+200之间；
动作3：旋转刷新图标按钮，以自身中心点为参照，顺时针旋转180度，旋转时的动画效果为缓慢退出，动画时间为500毫秒。
设置拖动时用例的动作
2).信息流动态面板—设置拖动结束时用例
动作1：移动刷新动态面板回到拖动前位置，动画效果设置为线性动画，时间500毫秒;
动作2：设置刷新动态面板状态为加载，进入和退出动画效果为逐渐，时间均为500毫秒;
动作3：旋转加载图标按钮，以自身中心点为参照，顺时针旋转1080度。旋转时的动画效果为缓进缓出，动画时间为1000毫秒（1秒）；
动作4：等待2000毫秒（2秒）；
动作5：隐藏刷新动态面板；
动作6：设置信息流动态面板为向后循环下一个状态，进入和退出的动画效果为逐渐，时间均为500毫秒；
动作7：设置刷新动态面板的状态为推荐，进入动画效果为向下滑动，时间为500毫秒，并勾选显示面板；
动作8：等待1000毫秒（1秒）；
动作9：隐藏刷新动态面板，动画效果为向上滑动，时间为500毫秒。
设置拖动结束时用例的动作
二、以微博、头条为代表的下拉刷新
1.观察交互动作
向下滑动时：内容向下移动至一定距离时，页面的背景层出现刷新提示文字信息。过一段时间后，刷新提示文字变化，提醒释放刷新内容。
滑动结束时：内容向上移动一段距离时，页面背景层提示正在进行内容刷新；等待一段时间后，内容发生了变更，同时在页面上方出现了推荐提示信息，提示推荐了xx条新内容。
微博交互分析（元件名参照下文）
2.关于准备元件的一些说明
首先我们需要添加两个动态面板：
第一个动态面板用来设置刷新过程中的文案提示和图标切换，共有3个状态：下拉刷新、释放刷新和加载，命名为刷新提示；
另外一个动态面板用来存放切换的内容，该动态面板有3个状态，不同面板内的文字和占位符通过不同的颜色来进行区分，命名为内容。
将两个动态面板选中转换为新的动态面板，命名为显示层；再将显示层转换为新的动态面板，命名为操作层。
这里我们对显示的内容完成了两层的嵌套，里面一层显示层主要用来切换显示的内容，外面一层作为我们拖动的操作层，拖动事件的交互用例都通过操作层来进行设置。
最后我们还需要单独准备一个矩形框，用来显示推荐内容的数量,默认设置为隐藏。
3.设置交互用例
1).加载图标-载入时用例：为刷新提示动态面板的加载状态设定一个载入事件，载入时循环切换指示器动态面板的状态，从而利用指示器的状态改变来实现加载图标的自动旋转。
设置载入事件
2).指示器-状态改变用例：拖动一个空动态面板，设置3个状态，状态改变时，1000毫秒内顺时针旋转720度，动画效果为线性。
设置状态改变事件
3).操作层动态面板-拖动时用例
动作1：垂直拖动显示层动态面板，拖动范围限定在操作层底部以上的300个像素；
动作2：设置刷新提示动态面板状态为下拉；
动作3：等待1000毫秒（1秒）；
动作4：设置刷新提示动态面板状态为释放，进入和退出的动画效果为逐渐，时间500毫秒。
设置拖动时用例的动作
4).操作层动态面板-拖动结束时用例
动作1：移动显示层动态面板到坐标（0,40），这个位置正好刷新提示的内容显示出来；
动作2：设置刷新提示动态面板状态为加载中；
动作3：等待2000毫秒（2秒）；
动作4：移动显示层动态面板到拖动前位置，即回归初始位置；
动作5：设置内容动态面板循环切换下一个状态；
动作6：显示推荐提示语内容，动画效果为逐渐显示，时间为500毫秒，并选择至于顶层；
动作7：等待1000毫秒（1秒）；
动作8：隐藏推荐提示语，动画效果为逐渐隐藏，时间为500毫秒。
设置拖动结束时用例的动作
上述的讲解，希望能够帮助到有兴趣学习的同学。大家看完以后，如果还有一些细节上的东西存在疑问，可以下载源文件，来进一步的观摩和分析。
下载链接：https://pan.baidu.com/s/1mkmV2FQ 密码：subx