快好知 kuaihz

Axure制作:页面上下滑动时的菜单栏悬浮吸顶效果

在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢?

作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下滑页面时,超过一定向上滑动时,菜单栏能有吸顶效果,这个效果相信不用我多说,都应该懂,但是如何用axure实现呢?

因为不会,先看了网上的教程,但是网上的教程都是以网页滚动,坦白说都是pc端的交互效果。

当然如果对于新手小白来说,直接拖出来一个动态面板,然后让其显示滚动条,就可以很简单的达到滚动效果,然后设置菜单栏超过一定的滚动距离时,吸顶就可以。

没有超过一定滚动距离,就保持原来的位置就可以,这里面主要设计的是scrollY这个函数(页面滚动时用的windows.scrollY函数)。

(点击动态面板的属性栏)

(大家可以去试试,当动态面板加上这个滚动条时,就可以自己实现内容的滚动效果)

前面是给大家温习一下网上的教程,接下来就来讲一下我所制作的app端页面拖动上下滑效果。

我就以拉勾网为例,具体大家可以看一下拉钩app首页就行。

准备素材:

1. 手机素材:不用说了,这就是我们的框架

2. 主动态面板:你可以把它理解为用手滑的那块屏幕

3. 滑动面板:内容的承载面板,将完整内容都放入这个面板

4. 菜单栏:

菜单栏准备两份,大家可以看下面这个图,记住,一摸一样的准备两份,一份放入在滑动面板中,一份则放在滑动面板外(放置图层顶端,默认隐藏状态),可以看一下图中的层级关系。

滑动面板——内容准备

5. 用到的函数:this.y(元件的纵坐标,没错就是这么简单)

准备材料都知晓后,接下来就要开始我们的交互设置:

1. 首先,我们要作出用鼠标拖动主面板时,内容可以上下滑动,这一步很简单:定位到主面板元件-拖动时-移动-滑动面板-垂直拖动-确定,设置完成,大家可以预览一下,现在我们的内容是不是可以自由的上下拖动了。

2. 第二步,我们要现在脑子中有一个逻辑判断:因为菜单栏在滑动面板中的y坐标为281(我自己设置的),所以,当向上拖动距离大于281时,是不是菜单栏就要有吸顶效果了;当向上拖动距离小于281时,菜单栏是不是该在哪个位置,还在哪个位置。

那如何体现我上下拖动的距离呢?那就是用前面我们说的“this.y”函数,指的是元件的y坐标轴。按照我的流程来的小伙伴,有没有注意到,滑动面板的坐标轴是(0,0),意思是这里面的元件的坐标都是按相对位置来算了,是在主面板里又定位了一套坐标轴,那同理滑动面板里的元件也都是在滑动面板下从新定位的一套。

滑动面板坐标

所以,滑动面板里的菜单栏的位置为(7,281),意味着当滑动面板向上滑动距离大于281时(滑动面板.y=<-281时),显示“菜单栏-复制”;当上滑距离小于281(滑动面板.y>=-281时),隐藏“菜单栏-复制”,接下来就是设置过程:

滑动面板设置

滑动面板设置

设置不满足时隐藏菜单栏

那么,设置完毕,大家就可以预览一下效果了,非常简单,你学会了吗?

原型在线浏览:https://woqt8g.axshare.com

插句题外话:为什么我不用”this.scrollY”这个函数,因为这个函数指的是上下滚动的距离,不是拖动的距离,大家不要搞混了,当动态面板有滚动条的时候,那个上下滑的距离可以用scrolly来表示,但是拖动不会变化scrolly的值,这个你可以用数字显示的形式去观察一下。

以上就是我做的适合移动端的吸顶交互效果。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:吸顶  吸顶词条  悬浮  悬浮词条  滑动  滑动词条  菜单  菜单词条  上下  上下词条  
原型

 主流原型工具可用性测试横向比较

可用性测试是指通过观察用户使用产品(或原型)的过程,记录和分析用户的行为和感受,以改善产品可用性的一系列方法。可用性测试适用于产品前期设计开发,中期改进和后期维...(展开)

原型

 Axure教程:怎样设计轮播图?

大家设计轮播图的时候,是怎么操作的呢?本文作者分享了自己的做法,来看看~轮者,循环也,姿势者,知识、形态也,故此文乃探究循环知识乎?非也,循环播放姿势也。吾日三...(展开)