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

我是一名设计师，Framer很新。基于在Framer.js中向上滚动或向下滚动的操作

我喜欢根据滚动的内容的方向隐藏/显示屏幕顶部的导航。如果我开始向下滚动页面，则会通过向上移动来隐藏导航栏。然后是相反的。

下面是我一直在玩的东西，但没有运气到目前为止。

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

我想我要动起来如果滚动位置小于当前位置，如果滚动位置更大，则向下滚动。

任何帮助非常感谢！

来源

2016-09-29 Luis Escobar

ScrollComponent图层具有方向属性。从文档：

scroll.direction

当前的滚动方向。返回“上”，“下”，“左”或“右”。滚动方向与拖动的方向相反操作：向下拖动时，实际向上滚动。此属性是只读的。

下面是一些示例代码，以帮助您入门。您可以在底部找到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

来源

2016-09-29 12:03:49 kazzyt

这太好了！非常感谢。出于好奇，什么是“为我在[0..10]”？你是否推荐任何网站，我可以找到教程。我几乎看到了Framer上的少数几个。大多数情况下，我发现人们展示他们的项目，但没有解释。再次感谢！ –

没关系，我明白了。索引 - 你创建了10个面板。直到我打开你的榜样才开始意识到。谢谢！ –

乐意帮忙，欢迎来到Stack Overflow。如果此答案或任何其他人解决了您的问题，请将其标记为已接受。 – kazzyt

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

回答

相关问题