如何向滚动视图添加视差? [英] how to add parallax to a Scrollview?

问题描述

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

I want to use famo.us standard Scrollview but have a background image which is scrolling at a different speed to give a parallax effect.

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

Rather than setting up timers and getPosition stuff, i was wondering if there's a way to hook into an event stream, or somehow pipe the Scrollviews position into a transformation that's applied to another object? For example use the modifier within the scrollview and a modifier chain and then apply that to another imageSurface?

这里的例子有点少，希望大家指点.

The examples are a bit thin here so would appreciate any pointers.

推荐答案

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

To answer your question, the way to pipe scroll events is to use the sync property of scrollview to get updates on scroll.

那就是..

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

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

However for rendering objects in sync and ensuring precision on such, I have found the Engine prerender function to be wonderful.

所以我会做这样的事情.

So I would do something like this.

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

})

希望这些指针有帮助！

这篇关于如何向滚动视图添加视差?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！