header_v0.7.31

浅谈Pixate里如何实现“App/Top Bar”跟随list运动的效果

2年前发布

原创文章 / 平面 / 教程
Jaret_Zen 原创,如需商业用途或转载请与Jaret_Zen联系,谢谢配合。

一个比较典型的效果:让App/Top Bar 跟随list的上下滑动而消失/显示


很多朋友在问:如何在Pixate里做到在任意位置向上滑动列表时收起顶部的AppBar,而反方向滑动时顶部的Bar再返回到原来的位置。


效果如下:



以上这个效果在AppBar的Move里设置condition时我们需要用到两个属性:


1. VelocityY

Velocity的含义是速率。


在pixate的属性里表示可滑动图层(Y轴)每秒滑动点的速率。同时因为对应的是scroll滑动的这个属性。所以是有正负之分的。Velocity的数值越小,速率就越大:滑动范围越小(越敏感);Velocity的数值越大,速率就越小:滑动范围越大(越不敏感)。


所以实现AppBar的显示/消失基本上就是用Velocity来控制的。




2. ContentY

表示scrollview层下内容的(Y轴)坐标。


为什么还需要用到这个呢?因为我们会发现,在list滑动到顶部和底部时AppBar在不需要显示的情况下也会显示出来。这是因为Velocity并不知道什么时候到达了list的顶部或底部。所以我们需要利用ContentY的范围来限定AppBar的范围。让其在不该出现的范围里不会因为velocity的继续触发而再次激活。


所以Move里的condition只需要很简单的输入:

If:

scrollview.velocityY > xx(数值) && scrollview.contentY > xx(数值)

AppBar的Top为 xx(数值),就被隐藏起来了


Else if:

scrollview.velocityY < -xx(数值) && scrollview.contentY < xx(数值)

AppBar的Top为 -xx(数值),就回到了原来的位置。


附上源文件,有需要的朋友可以研究一下。

33
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功