本文主要讲的是关于手机屏幕上的滑动在原型设计中是如何实现的,一起来文中看看~
我们使用手机时经常看小说,逛商城需要大量的滑屏。左右(滑过来,滑过去),上下(滑上去,滑下来),滑的不行不行的,有木有?但是在原型设计中是如何实现呢?
反正这个问题也困扰我一段时间了,就是不好实现,也得亏我没有放弃,查看了很多资料,慢慢琢磨出了一点门道,分享给大家,先预览一下再看下面的详细过程。
一、分析
主要实现以下功能:
- 上下拖动回弹效果;
- 上下拖动没有回弹效果;
- 左右拖动。
我们先来看看1、2如何实现,后面再看3。
二、元件准备(1、2需要的元件一样)
从元件库中拖一个动态面板命名为“fisrst”高“400”双击“state1”再拖一个动态面板命名为“second”,高“550”(second要高于first,要不然无法拖动)。
三、交互
(1)上下拖动有回弹
给“second”添加“拖动时”用例,垂直拖动“second”等待200毫秒显示刷新。
这时按F5预览,我们上下拖动图片发现会一直拖出屏幕,没有出现我们需要的弹弹弹~
我们返回“second”添加“拖动结束时”用例1,我们先添加条件,我们需要判断“second”有没有发生拖动,如果“second”y轴坐标>0(y轴相对移动)说明发生拖动,并且是向下拖动。
如果“second”向下拖动,我们需要让“second”回到原来的位置。这里我们添加了有个刷新的动态效果,所以先让“second”移动到(0,40)的位置,让动态效果出现,等待1000毫秒,移动“second”到(0,0),让“second”回到原来的位置。
为“second”添加“拖动结束时”用例2,我们添加条件,我们需要判断“second”有没有发生拖动,如果“second”y轴坐标<-150(y轴相对移动“150”为“fisrst”和“second”高度差)说明发生拖动,并且是向上拖动。
如果“second”向上拖动,我们需要让“second”回到(0,-150)的位置,正好是“second”最底下。
(2)上下拖动没有回弹效果
为“second”添加“拖动时”用例,垂直拖动。添加边界,顶部《=0(不让“second”向下拖动),顶部》=(“first”的高减去“second”的高),也就是,顶部向上移动不超过“-150”。
按F5预览,功能都实现了,接下来我们完成,(3)左右拖动。
四、元件准备
只需要从元件库中拖一个动态面板命名“move”,双击“state1”添加一张图片,再复制“state1”,添加4状态,换4张不同的图片。
五、添加交互
给动态面板添加“向左拖动结束时”用例1,添加条件,判断“move”面板状态,如果面板状态为“state1”,设置面板“move”为“state2”向左滑动。依次循环,就能实现向左滑动,向右滑动只要添加“向右拖动结束时”用例。
源文件下载:链接:https://pan.baidu.com/s/1E5ai-YTECuPRaHU_FZ7gBg 密码:8tci
本文由 @就这样吧! 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Pexels,基于 CC0 协议
推荐阅读:辽宁热播
-
旗舰手机“花里胡哨”?为何懂手机的人都选千元
一直以来,旗舰机都是手机厂牌的门面担当,不仅拥有最前沿的黑科技,还有各种不俗的硬核配置,不过在真实的市场中,他们并不是主角,千元机才是最受用户选购的机型。所谓“...
2019-10-09 -
四年前的苹果6s,相当于现在什么级别的国产手
尽管不想承认,目前苹果手机的性能、配置,依然很顶尖,从处理器的跑分,就可见一斑,同一代处理器,华为的麒麟990,以及高通的骁龙855 plus,单核跑分都是12...
2019-10-09 -
荣耀迎来5G概念机?麒麟990+6400W像
摘要:华为在前段时间发布的mate30系列之所以能够获得大量消费的者的喜爱,因为华为不但使用了5G技术,在拍照方面也具有优秀的性能,而华为旗下的荣耀手机最近也有...
2019-10-09 -
iPhone 11陷刮擦门:屏幕脆 塑料钥匙
近日,有用户反映iphone11屏幕划痕问题,部分用户将iPhone 11单独放在一个的口袋中,也没有钥匙或其他物品,但仍然出现划痕。经过媒体的实际测试,塑料钥...
2019-10-09 -
向安卓致敬!iPhone 12装上呼吸灯,机
可以说能叫做花里胡哨的手机,一定只能在安卓手机中找到,在苹果手机中是无法找到的。因为安卓手机比较注重外观色彩,所以我们可以看到有很多颜色比较怪异的手机,而苹果手...
2019-10-09 -
微博明星爱用什么手机?9月明星势力榜前100
这两天有些无聊,自己简单统计了一下微博9月明星势力榜前100位明星所使用的的手机。纯手动统计,可能略有出入。根据统计显示,100位明星的微博小尾巴中,iPhon...
2019-10-09 -
6000元谁主沉浮 华为Mate系列这成绩打
都说“果粉”眼里只有苹果,其他的手机根本看不上眼,再更换新机的时候还是会选iPhone。那其他品牌的“品牌忠诚度”如何呢?最近前魅族科技原高级副总裁李楠发文表示...
2019-10-09 -
首尔市2022年实现免费WiFi全覆盖
人民网讯 据韩联社报道,韩国首尔市政府计划到2022年,免费公共WiFi将覆盖首尔市全境,接入公共物联网的共享停车、智能路灯、防走失等服务也将推广。首尔市政府7...
2019-10-09