第4节:APP原型动效库—下拉刷新

发布日期:2018-04-21    浏览量:14271

加入VIP社群,可终身免费下载本案例原型,及本站全部VIP原型,新增的原型不再收费。 查看VIP原型

原型在线地址:http://www.pmdaniu.com/rp/view?id=ACNRMQFhUG0MOFRqAytWAw

一、思路解析

  1. 设置2个动态面板:下拉刷新动态面板(高度:65px,以下简称“刷新面板”),内容动态面板(高度调整为内容尺寸,以下简称“内容面板”);
  2. 刷新面板初始坐标(0,0),内容面板初始坐标(0,65)
  3. 垂直拖动内容面板时,刷新面板底部移动至内容面板头部,设置提示语为:“下拉刷新”;
  4. 拖动内容面板y坐标大于等于130时,刷新面板改变提示语为:“松手刷新”;
  5. 拖动结束时,若内容面板头部y坐标大于等于130,则移动刷新面板至(0,65),移动内容面板至(0,130),改变刷新面板提示语为:“刷新中…”,并在此坐标等待1000毫秒,最后再将两面板移回至初始位置;
  6. 拖动结束时,若内容面板头部y坐标大于65小于130时,则将两面板移回至初始位置。

#、对于时间比较紧的朋友,可以直接复制去用,无需学习怎么做;若要修改提示语,直接进入中继器修改即可。

二、步骤解析

原型在线地址:http://www.pmdaniu.com/rp/view?id=ACNRMQFhUG0MOFRqAytWAw

Axure产品原型

Axure产品原型官网(pmyuanxing.com)—— 专注于提升Axure产品原型的效率与体验!
为产品经理、交互设计师、UI设计师提供:Axure原型模板下载、APP原型下载、电商原型下载、APP元件库等整站原型的下载,以及Axuer教程和Axure视频教程的服务。
欢迎加入VIP社群,与小伙伴一起学习交流,共同成长!

合作伙伴

  • 微信公众号
  • QQ交流群

Axure产品原型:专注于提升Axure产品原型的效率与体验! ©Axure产品原型,版权所有 侵权必究  粤ICP备18031656号-1