很多APP列表页都有一个效果,滑动底部后提示没有信息后,松手,页面自动滑动隐藏没有信息的提示。那么这个效果在Axure里怎么实现呢?
很多APP列表页都有一个效果,滑动底部后提示没有信息后,松手,页面自动滑动隐藏没有信息的提示。如果在Axure实现这个动态效果内,我们开始。
基于上一篇文章 “Axure教程:长页或长图滚动效果”前面一些相同的步骤我就详细展开了。
有问题或失败时去详细查看,因此可能增加学习路径,对这篇文章的体验不好,但对你的学习会有很多帮助,通过失败去找原因和解决,会让你融会贯通。
Axure版本:8.0.0.3293。
成品展示:
操作流程一
(1)创建固定区域动态面板(固定展示区域高度435) 易出错误:固定区域不要设置为自动调整。
(2)需要滚动的长页(长图高度1196)
这里我只截取一小部分,对比之前文章中的长图底部增加一个提示。
(3)长页转换为动态面板
易出错误:长页没有转换为动态面板。(因为8.0版本图片、形状、快照没有拖动时的用例)
(4)长页的动态面板,放入固定区域动态面板中的Stat1中
(5)设置长图可移动区域
计算可移动区间:顶部=435-1197=-762;底部=1197。
为什么这么计算看上一篇文章,主要时长页在固定展示区域内被拖动时不至于划出屏幕。
在固定区域(动态面板)的Stat1中,为长页(动态面板)设置拖工时用例:
- 移动为垂直移动
- 添加便捷:顶部>=-762,底部<=1197
操作流程二(操作都在固定区域(动态面板)State1中)
以上就完成了,长页在固定显示区域内的拖动问题,以下内容内本次文章的重点内容。
(1)创建神奇的天际线
创建一个水平线,放到长页(动态面板)上任意位置。
(2)计算下,滑到到底部后,如何要自动回弹的高度
我这里高度=80
(3)计算自动滑动后,长页的绝对位置(这个算法有跟多种,我这里只是其中一种)
- x的绝对值不变,我这里=0
- y的绝对值=顶部+回弹高度=-762+80=-662
(4)设置天际线的天花板高度
水平线的X值,不要超过长页(动态面板)的宽,要在TA的里面;
水平线的y值,就是天花板,-662。
(5)最后的动作,回弹动画
为长页(动态面板)设置拖动结束时的动作,发起一个绝对位置y=-662。(661或660 也可以,否则有时候会闪一下)
设置发起绝对位置的触发条件:
当长页(动态面板),发展到(接触)天花板(之前天际线的水平线)时,就要触顶反弹了。
OK全部完成,F5试下效果。
完工闲聊
其实日常原型中,不用做这么复杂的动画效果,给好说明注释其实就可以了。
当然如何你是为了做效果和Demo展示另当别论,不过RP的展示效果真的很差。
本文由@ 紫鼠 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议