基于在 Framer.js 中向上或向下滚动的操作

Question

我是一名设计师，对 Framer 还很陌生。

我希望能够 hide/show 屏幕顶部的导航基于下方内容的滚动方向。如果我开始向下滚动页面，导航会通过向上移动来隐藏。然后相反。

这是我一直在玩的东西，但到目前为止还没有成功。

scroll.on Events.Scroll, -> 如果 scroll.scroll > scroll.scrollY 那么 psd.subHead.animate 特性： y: -50

else scroll.scroll < scroll.scrollY then psd.subHead.animate
    properties:
        y: 0

我想如果滚动位置小于当前位置我想向上移动，如果滚动位置大于当前位置我想向下移动。

非常感谢任何帮助！

Answer 1

ScrollComponent 层有方向属性。来自文档：

scroll.direction

Current scrolling direction. Returns "up", "down", "left", or "right". The scrolling direction is the inverse of the direction of the drag action: when dragging downwards, you're effectively scrolling upwards. This property is read-only.

下面是一些帮助您入门的示例代码。您可以在底部附近找到 scroll.direction 用法。

Framer.Defaults.Animation = time: 0.3

scroll = new ScrollComponent
    width: Screen.width
    height: Screen.height
    scrollHorizontal: false
    backgroundColor: "blue"
    contentInset:
        top: 10
        bottom: 10
    borderRadius: 8

for i in [0..10]
    layerA = new Layer
        width: Screen.width - 20, height: 150
        x: 10, y: 160 * i 
        backgroundColor: "#fff"
        superLayer: scroll.content
        borderRadius: 4

navBar = new Layer
    x: 0
    y: 0
    width: Screen.width
    height: 130
    borderRadius: 8
    backgroundColor: "red"

scroll.on Events.Scroll, -> 
    if scroll.direction == "up"
        navBar.animate 
            properties: 
                y: 0
    if scroll.direction == "down"
        navBar.animate
            properties:
                y: -130

基于在 Framer.js 中向上或向下滚动的操作

Action based on scrolling up or down in Framer.js

scroll

framerjs