在ProtoPie里做滚动交互,真正要先分清的是两件事,一件是滚动容器怎么搭,一件是滚动手感怎么收。官方文档对滚动容器的说明很直接,滚页和滑页都要先在容器层属性里设置方向和反弹,再把需要滚动的图层放进这个容器里;而响应动作里也单独提供了【滚页】这个能力,用来把图层滚动到指定位置。
一、ProtoPie滚动交互怎么做
先把容器搭对,再去加联动,顺序不要反。ProtoPie官方写得很清楚,滚页是让图层跟随手指在水平或竖直方向滚动,所以最基础的做法,就是先创建一个容器层,再在属性栏里把它设成滚页,并选好方向。
1、先创建滚动容器
把需要滚动的内容先编成组,再把这个组放进容器层里。官方说明里提到,滚动或滑动的图层都要放到容器层中,滚动交互才会生效。
2、在属性栏里设方向
滚页属性里最先要看的就是【方向】。你要做上下滚,就设竖直;要做左右滚,就设水平。这个入口本身就在容器层属性面板下端。
3、需要程序控制时再加【滚页】响应
如果你不只是想让用户手指拖动,还想在点击按钮、触发条件或进入场景后把内容滚到指定位置,就去响应动作里加【滚页】。官方文档对这个响应的定义很明确,就是把长图层滚动到指定位置。
4、做联动时优先监听scroll
官方示例和教程里都提到,做吸顶、视差或滚动驱动动画时,要检测滚动容器的scroll或scrollOffset,再把别的图层位置、透明度或播放进度映射过去。这样做出来的交互会比单纯拖一层内容更完整。
二、ProtoPie滚动惯性怎么调整
这里先说清一个边界。官方当前滚动容器文档里,滚页属性明确列出的只有【方向】和【反弹】,没有单独列出一个“惯性强弱”或“摩擦系数”的滚动容器参数。也就是说,如果你说的是容器原生滚动手感,官方文档里没有一个专门的惯性滑杆可以直接调。
1、先用【反弹】控制边缘手感
如果你觉得滚到顶部或底部时手感太松,先看【反弹】。官方说明里写得很直接,滚页和滑页都可以开关回弹效果。很多人说的“惯性不对”,其实先改这一项就会明显变化。
2、需要更强控制时,用程序滚动代替纯手势滚动
因为原生滚动容器没有单独的惯性参数,所以想把手感收得更细,通常要借助【滚页】响应,加上持续时间和缓动,自己做一段程序化滚动。官方文档说明,响应动作本身支持动画缓动,而缓动可以控制加速和减速的感觉。
3、想更顺滑就偏向Ease Out
官方对Ease Out的说明是,动画结束时会逐渐减速,更像自然滑停。如果你觉得滚动停得太硬,常见做法就是把程序滚动的收尾改成Ease Out或Ease In Out,而不是只改位移值。
4、想更干脆就缩短时间并关掉反弹
如果你要的是偏工具型、列表型的滚动感,通常不需要太重的尾巴。这种情况下,滚动响应时间可以缩短一些,同时把【反弹】关掉,手感会更利落。这里的依据仍然来自官方已公开的两个控制层,一个是容器反弹,一个是响应缓动。
三、ProtoPie滚动手感为什么总是不自然
很多时候,不是ProtoPie不能做,而是把原生滚动和程序滚动混着用了。官方文档其实已经把边界摆出来了,容器滚动负责基础手势移动,Detect、Chain和Scroll response负责把滚动偏移映射到其他效果上。你如果一边用原生滚动,一边又给同一层叠过多额外位移,手感就容易发飘。
1、先确认是不是同一层被重复驱动
2、再确认你要的是原生滚动,还是程序滚动
3、滚动联动尽量只绑一个主变量
4、最后再去微调反弹和缓动
总结
ProtoPie滚动交互怎么做,先把滚动容器搭起来,再用scroll或scrollOffset去带动其他动画,路径最稳。ProtoPie滚动惯性怎么调整,官方当前文档里没有单独的惯性参数,实际更常用的是通过【反弹】和【滚页】响应的时间、缓动来间接收手感。把这两层分开做,滚动体验通常会顺很多。
