教程顶部下拉刷新动效制作

　　本文从元件的实现、交互的实现两个角度，拆解了APP顶部下拉刷新动效制作，并展示了相应的预览效果。
　　【顶部下拉刷新】一般应用于内容可变的界面或列表，刷新属于用户的主动行为。此教程为最常见的下拉刷新。在设计电商小程序高保真原型规范时，正是应用此动效。
　　（详细原型及交互和源文件在下方文章评论中可见）
　　具体实现方法
　　第一步：元件的实现
　　1。需要准备元件为：
　　一个矩形作为模态提示，命名为：加载提示；（黑色提示框）
　　一个图片元件作为内容，命名为：刷新图片。
　　一个图标和一个文本标签，作为刷新的文本展示，文案为：下拉刷新。（苹果模型可忽略）
　　如下图所示：（记得调好图层的顺序，其中加载提示为最顶层）
　　第二步：交互的实现
　　1。原理分析：
　　1）用户下拉图片内容时，图片下移，刷新和图标显示，文案为：下拉刷新；
　　2）用户拉到一定距离时，刷新文本标签文本变为：松开刷新；
　　3）用户松开图片内容时，图片上移一段距离，文本标签文本变为：正在刷新；并旋转刷新图标；
　　4）图片继续上移至初始位置，盖住图标和文本标签。显示隐藏的加载提示矩形。
　　这样，面板就可以实现无限循环切换。
　　2。交互步骤实现：
　　选中图片，添加【载入时】交互事件：
　　a添加等待事件1000毫秒；
　　b勾选【当前元件】，移动：相对位置，X：0、Y：60；动画：缓慢退出；时间为：2000毫秒；
　　c再添加等待事件2000毫秒；
　　d设置【刷新】文本标签的文本值为：松开刷新；
　　接下来，则为图片上移的交互事件：
　　e勾选【当前元件】，移动：相对位置，X：0、Y：20；动画：缓慢退出；时间为：1000毫秒；
　　f添加等待事件1000毫秒；
　　g设置【刷新】文本标签的文本值为：松开刷新；
　　h添加旋转事件，勾选【图标】，旋转：相对位置，角度：3600；方向为：顺时针；锚点为：中心；动画为线性，时间为：2000毫秒；
　　i再添加等待事件2000毫秒；
　　最后，为刷新加载成功的模态提示显示：
　　j勾选【当前元件】，移动：相对位置，X：0、Y：40；动画：缓慢退出；时间为：1000毫秒；
　　k显示【加载提示】；
　　L添加等待事件1500毫秒；
　　M设置【刷新】文本标签的文本值为：下拉刷新；
　　N隐藏【加载提示】；
　　O添加【触发事件】，勾选【当前元件】，勾选【载入时】交互事件。
　　详细交互如下图所示：
　　第三步：效果的预览