豆瓣电影滑屏切换和菜单顶部吸附结合的交互实现

　　本文是关于豆瓣电影APP在滑屏切换和菜单顶部吸附结合的交互实现。enjoy
　　从预览效果来看，这里涉及到滑屏和单击左右切换、顶部菜单两个主页的吸附这两大交互。
　　我的上一篇文章讲的就是前一大交互，不过我还是会在这里复习一下的。
　　第一步：截屏，切图
　　我的手机可以长屏截屏，得到第一页截屏：
　　、切图
　　我们需要切到如下素材：手机状态栏和搜索框、广告、正在热映黑字、即将上映灰字、黑色滑块、滑块下的灰色线条、电影主页内容，下方主菜单。
　　、操作
　　拉辅助线（注意放大贴合到像素级别）切图工具沿着辅助线拉矩形点击文件导出储存为web格式找到导出的文件夹images命名。
　　第二屏中间有滚动日期，没有截到长屏，于是截了8张屏，然后慢慢切图：
　　切图需要取得素材：正在热映灰字、即将上映黑字、时间栏、主页内容。
　　如图：
　　整合一下素材：
　　第二步：将素材放入Axure
　　由于我的手机分辨率是10801920，于是我设置的原型尺寸为360640，缩小三倍。
　　锁定宽高比，设置宽为360，正在热映图则设置为180。
　　接着就是按住ctrlshift，复制拖动正在热映插入即将上映灰字，和黑色滑块，设置高为2像素，切到的黑色滑块图尺寸为5405，高5除以三，取2像素（因为不能设置小数）。
　　为了不让黑色滑块另一边不露空隙，我要将它上移1像素，留1像素至于灰色线条之上（灰色线条像素为1）经计算正在热映黑字Y坐标为189，高为38，相加为227，那么黑色滑块Y坐标为226，灰色线条Y坐标为227。
　　继续插入主页和底部菜单，因为尺寸为360640，底部菜单的高为49，所以设置它的Y坐标为591。
　　插入时间栏，因为它是在即将上映那一主页最上部的，所以Y坐标为228，和这边主页一样。（先隐藏掉，这点最后会讲）
　　将各个元素命名，将需要顶部吸附的元素组合，命名为菜单组。
　　将会滚动的元素：广告，吸附菜单组，主页选中，转换为动态面板，命名为滚动。
　　因为搜索框高为64，640减去64为576，设置动态面板样式，尺寸为360576，属性自动显示垂直滚动条。
　　先F5预览一下，只有滚动效果，没有左右滑屏和菜单吸附效果。
　　先看那个时间栏的高度为74，将主页转换为动态面板，取消自动调整为内容尺寸，添加状态，状态2插入内容图片，第一张图设置Y坐标为74，为了给时间栏留出空间。
　　设置两个菜单为动态面板，添加状态，插入图片，目前所有素材都上去了，那么都命名好
　　第三步，开始交互
　　（）第一大交互左右滑动或点击切换主页
　　参考《Axure：模拟豆瓣电影APP滑动点击切换主页》
　　首先设置向左拖动结束时的交互，如下图，以此类推设置向右拖动结束时的交互
　　设置两个灰色字体的点击事件的切换，先看即将上映灰字，交互和上面是一样的：
　　以此类推，设置正在热映灰字的交互，预览一下：（吐槽一下：GIF录制和压缩真的很费时间啊！我总要想办法让它不超过2M）
　　OK，第一大交互搞定了，但是上面没有顶部吸附效果，休息一下。
　　（）第二大交互：两种状态下的菜单顶部吸附
　　变量scrollX和scrollY
　　首先讲一下变量scrollX和scrollY，就是动态面板滚动的距离，也可以说，scrollX是动态面板滚动时元件的X坐标，scrollY是动态面板滚动时元件的Y坐标。首先要知道Axure的Y坐标相对于我们的视觉习惯是刚好相反的，因为它的Y坐标是越往下越大，如图：一开始坐标为（0，0）当你往上滚动100时，此时它的坐标为（0，100）；
　　让我们验证一下，插入一个矩形，设置当动态面板滚动时，显示scrollY的数值大小：
　　如果理解了，那我们开始做顶部吸附交互吧。
　　需要思考的问题
　　首先要知道，何时开始吸附，何时停止吸附，然后要知道怎么个吸附法
　　答案来了：
　　开始吸附就是当滚动的距离刚好到达菜单栏Y坐标的那一刻，结束吸附就是滚动距离没有达到菜单栏Y坐标；此时就要知道菜单栏的Y坐标，为125，那等于或超过125时，开始吸附，小于时则停止。
　　让菜单栏吸附就是让菜单永远处于最高的部位，而最高的部位刚好就是（0，scrollY），记住在最顶部有一个隐形的Y坐标一直随着滚动而变化。停止吸附就是菜单栏回到它原来的地方。
　　case1：
　　case2：
　　快要大功告成了，但是还有两个问题：
　　即将上映主页时间栏没有吸附，之前将它隐藏了，如果不隐藏，那么正在热映主页也会看到。
　　仔细看上图，在吸附的同时切换主页，会发现吸附栏是透明的，因为菜单黑白两种颜色字体切换时是有逐渐这个动画的。
　　那要如何解决呢？
　　第一个问题这样：index载入时，隐藏它，当主页向左滑动结束时（包括点击即将上映灰字），将时间栏显示，向右滑动结束时（包括点击正在热映灰字），将时间栏隐藏。
　　第二个问题这样：加一个白色矩形置于吸附菜单栏和主页之间。
　　我错了，其实是把矩形插入到菜单栏组合，并放在最下面，OK，预览一下。
　　我发现学习一个工具的最好办法就是直接上手做，以点带面，即学即用，而不是想先系统学会这个工具再开始去做。
　　共勉！
　　本文由kevin原创发布于人人都是产品经理。未经许可，禁止转载。
　　题图来自Pexels，基于CC0协议