如何将视差添加到滚动视图？答案

【问题标题】：how to add parallax to a Scrollview?如何将视差添加到滚动视图？
【发布时间】：2014-05-04 23:59:57
【问题描述】：

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

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

这里的例子有点薄，所以请多多指教。

【问题讨论】：

标签： scrollview famo.us

【解决方案1】：

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

那是..

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)));

})

希望这些指点有所帮助！

【讨论】：

【解决方案2】：

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

我从演示中的代码中了解了很多关于 Famo.us 的信息，但是尚未向测试列表之外的用户提供。所以我克隆了项目文件。

UltraVisual：视差滚动演示

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

更高级的滚动动画演示

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

希望对你有所帮助！

【讨论】：