famo.us - 使用 famo.us 进行无限视差滚动

Question

我有一个滚动视图和一个图像作为不同表面的背景，z-index 较低。我想以滚动视图的一半速度滚动图像。

关于如何实施它的任何想法？

Answer 1

我不能给你一个完整的解决方案，但这应该会让你走上一条不错的道路。

1) Famo.us 开发了多个滚动视图。每个都有一个稍微不同的方法来从中获取 'scrollTop' 值。

• 之前创建的只为您提供列表中第一个可见元素的 scrollTop 值。因此，在这种情况下，您可以获取已滚动的元素数量并自己计算实际值。或者，如果您在 scrollView 中有少量且数量有限的元素，您应该将所有元素包装在单个视图中并将单个视图传递给 scrollView。这样 Famo.us 必须对屏幕外元素进行计算，但如果元素数量足够少，它可以使许多动画/计算变得更加容易。

• 第二个滚动视图在内部调用 LimitedScrollView。我还没有太多经验，但无论如何它应该给你正确的值。

2) ScrollView 在滚动时触发事件。使用它来更新可转换的值。

伪代码：

scrollView.on('scroll', function(){
  transitionable.set(scrollView.scrollTop)
});

3) 您现在可以将背景的变换值绑定到可转换对象。

伪代码：

background.transformFrom(function(){
  return Transform.translate(0, -transitionable.get()/2, 0);
});

现在，事情应该可以正常工作了。

希望有帮助。