Axure：顶部下拉刷新和图片加载过程
本文从功能的实现、所需原件以及交互等角度去描述，拆解了动效制作，并展示了相应的预览效果
顶部下拉刷新过程
【顶部下拉刷新】一般应用于内容可变的界面或列表，刷新属于用户的主动行为。此功能为比较常见的刷新功能，仅仅是作为演示做，无变量以及条件的添加。
下面是动态图片的展示
1. 需要准备元件为：
（1）一个矩形元件作为下拉的起始点，内容为“请下拉刷新”，命名为：刷新；
（2）一个矩形作为加载完毕的提示，内容为“加载成功”，命名为：提示；
（3）一个刷新图标以及一个文本标签，作为刷新状态和文本的展示，内容为“请下拉刷新”。
（4）提示：调好图层的顺序，如下图所示，将【刷新】矩形设为隐藏
2. 交互实现
- 原理分析：
（1）用户下拉最大的矩形时，最大矩形下移，文本标签文本显示，文案为：下拉刷新；
（2）拉到一定距离时，文本标签文本变为：松开刷新；
（3）用户松开最大的矩形时，最大的矩形上移一段距离，文本标签文本变为：正在刷新；并旋转刷新图标；
（4）最大的矩形继续上移至初始位置，盖住图标和文本标签。显示隐藏的提示矩形。
（5）提示矩形消失
- 交互步骤实现：再次我不一一写步骤，我将在一下图片中展示出来。
这里有个问题：是当此过程还没有执行完毕，再次点击了“请下拉刷新”的矩形，那么矩形就会再次执行本过程，又往下下滑了60。那么我们怎么解决这个问题呢，就要添加边界。或者直接设置移动的位置为绝对位置即可
图片加载过程
【图片剩余加载】一般用于用户想要看更多丰富的内容的社交场景，类似微信朋友圈或是qq空间。此原型功能为比较简单的顺延操作，无系统变量以及全局变量。
下面是交互的展示
1. 需要准备元件为：
（1）两个矩形元件作为展示，命名为：刷新图片1与刷新图片2；
（2）一个矩形作为加载完毕的提示，内容为“加载成功”，命名为：提示；
（3）一个刷新图标以及一个文本标签，作为刷新状态和文本的展示，内容为“请下拉刷新”。
（4）提示：调好图层的顺序，如下图所示，将【刷新】矩形设为隐藏
2. 交互实现
- 原理分析：
（1）点击查看更多时，用户等待2秒，改变文本为“正在加载…”，且文字为动态展示
（2）并显示和旋转图标；
（3）等待后，隐藏按钮以及文本
（4）显示刷新图片2
（5）显示加载提示按钮，等待2秒后，隐藏按钮
- 交互步骤实现：再次我不一一写步骤，我将在一下图片中展示出来。
后续将不断更新原型内容。
原型源文件请私信哈，免费发给大家呢~