跳到主要内容

滚动约束(Scroll Constraint)

滚动以两种新约束的形式来到 Rive:一种用于为溢出内容添加基于触摸的滚动,另一种用于创建滚动条。两种约束都与现有的布局组件协同工作。我们计划在未来提供更通用的滚动组件以加快设置速度。

鼠标滚轮/触控板手势目前尚不支持,但已列入我们的 v1 路线图。


内容滚动

要创建内容滚动区域,请设置包含以下内容的层级:

  • 滚动视图(Scroll view) - 定义滚动区域范围的布局
  • 滚动内容(Scroll content) - 包含要滚动项目的布局(这是您将应用滚动约束的布局)。滚动量将由该布局的大小决定。通常您希望将此布局设置为包裹(Hug)或固定(Fixed)
  • 滚动项(Scroll items) - 要滚动的布局项目

图片

选择您的滚动内容布局,然后在约束检查器中使用添加操作来添加 滚动内容(Scroll Content) 约束。

图片

添加后,使用选项弹出菜单调整滚动内容属性。

图片

方向(Direction)

垂直(Vertical) - 仅在垂直方向滚动

水平(Horizontal) - 仅在水平方向滚动

全部(All) - 在两个方向滚动

滚动百分比 X/Y(Scroll Percent X/Y,可动画)

此属性允许你设置内容的滚动百分比,其中 0% 表示滚动到顶部/左侧,100% 表示滚动到底部/右侧。当内容设置为在一个或所有方向滚动时,此属性生效,并且可以在时间轴上设置关键帧。

滚动索引(Scroll Index,可动画)

此属性允许你设置要滚动到的滚动项的从 0 开始的索引。这仅在滚动设置为垂直或水平时有效,并且可以在时间轴上设置关键帧。

滚动百分比和滚动索引都控制滚动内容区域内的偏移量。因此,你应该只设置其中一个,因为当两者同时设置时会产生冲突。例如,你应该只在时间轴上的给定关键帧上设置这两个值中的一个。

为了将滚动百分比和滚动索引与物理滚动拖动一起使用,你应该创建一个空的"重置"时间轴/状态,并在滚动区域被交互时立即过渡到该状态。一种方法是向滚动视图添加鼠标按下监听器。

物理(Physics)

弹性(Elastic) - iOS 风格的滚动,具有减速和边缘橡胶筋效果

钳制(Clamped) - 基本的拖放,没有物理效果

吸附(Snap)

启用后,滚动内容将始终使整个项目停在滚动区域的顶部/左侧。

设置好所需属性后,切换到动画模式并开始播放状态机以预览应用的滚动约束。你应该能够在滚动视图区域内点击/拖动/释放来手动控制滚动。


列表滚动

要滚动列表,请使用上述内容滚动中描述的相同设置,但不是将多个滚动项添加到滚动内容布局中,而是可以添加单个列表。有关更多信息,请参阅数据绑定列表

滚动列表时有一些额外属性适用。这些属性只有在将列表添加到滚动内容后才会启用。

虚拟化(Virtualize)

启用后,列表将仅为当前在内容视图区域中的项目生成画板组件。这可以提高滚动包含大量项目的列表时的性能。请注意,虚拟化只能应用于一个方向(垂直或水平,不能同时两个方向)。

轮播(Carousel)

启用后,列表将沿任一方向无限滚动。要使用轮播模式,必须启用虚拟化。


创建滚动条

要创建滚动条,请设置包含以下内容的层级:

  • 滚动条(Scroll Bar) - 定义滚动条和轨道区域的布局
  • 滚动滑块(Scroll Thumb) - 定义可拖动滚动滑块的布局

图片

要创建滚动条,请选择一个作为滚动条滑块的布局组件。从约束检查器中,添加 滚动条滑块(Scroll Bar Thumb) 约束。

图片

使用选项面板中的目标按钮连接一个滚动布局。如上方的滚动内容部分所述,这应该是你应用了滚动约束的布局。

图片

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群