Question

我想使用famo.us标准Scrollview但是有一个背景图像，它以不同的速度滚动以产生视差效果。

我想知道是否有办法挂钩到事件流，或者以某种方式将Scrollviews位置传递到应用于另一个对象的转换中，而不是设置定时器和getPosition的东西？例如，使用scrollview中的修饰符和修饰符链，然后将其应用于另一个imageSurface？

这里的示例有点薄，所以我们会感激任何指针。

Answer 1

要回答您的问题，管道滚动事件的方法是使用scrollview的sync属性来获取滚动更新。

那是......

scrollview.sync.on('start',function(e){ // Do Something });
scrollview.sync.on('update',function(e){ // Do Something });
scrollview.sync.on('end',function(e){ // Do Something });

然而，为了使对象同步并确保其精确度，我发现引擎预渲染功能非常棒。

所以我会这样做。

Engine.on('prerender',function(){

  // Divide by scalar to get effect

  var parallaxEffect = 2.0
  var bgPos = -contentScrollview.getPosition() / parallaxEffect;

  imageView.state.setTransform(Transform.translate(0,bgPos,0)));

})

希望这些指针有所帮助！

Answer 2

这是一个懒惰的答案，但让我链接到他们的HackerLab校友创建的着名演示之一。它演示使用着名创建一些复杂的滚动/滑动动画。

我从演示中的代码中学到了很多关于Famo.us的知识，但是还没有向beta列表以外的人提供这些内容。所以我克隆了项目文件。

UltraVisual：Parallax Scrolling Demo

https://github.com/KraigWalker/famous-UltraVisual

更高级的滚动动画演示

https://github.com/KraigWalker/famous-IFTTT

希望这会帮助你！

如何将视差添加到Scrollview？

2 个答案: