scrollview - 如何将视差添加到滚动视图？

Question

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

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

这里的例子有点薄，所以会很感激任何指针。

Answer 1

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

那是..

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：视差滚动演示

https://github.com/KraigWalker/着名-UltraVisual

更高级的滚动动画演示

https://github.com/KraigWalker/着名-IFTTT

希望这可以帮助你！