Как добавить параллакс в Scrollview?

Я хочу использовать стандартный Scrollview для famo.us, но иметь фоновое изображение, которое прокручивается с другой скоростью, чтобы дать эффект параллакса.

Вместо того, чтобы устанавливать таймеры и getPosition, мне было интересно, есть ли способ подключиться к потоку событий или каким-либо образом передать позицию Scrollviews в преобразование, которое применяется к другому объекту? Например, используйте модификатор в scrollview и цепочке модификаторов, а затем примените это к другому imageSurface?

Примеры здесь немного тонкие, поэтому буду признателен за любые указатели.

Источник

2 ответа

Решение

Чтобы ответить на ваш вопрос, способ передачи событий прокрутки состоит в использовании свойства sync для 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 });

Однако, для рендеринга объектов в синхронизации и обеспечения точности на них, я обнаружил, что функция prerender Engine замечательна.

Так что я бы сделал что-то подобное.

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

})

Надеюсь, эти указатели помогут!

Источник

Это немного ленивый ответ, но позвольте мне связать вас с одной из знаменитых демонстраций, созданных их выпускниками HackerLab. Он демонстрирует использование известного для создания сложной анимации прокрутки / прокрутки.

Я многое узнал о Famo.us из кода в демоверсиях, однако он еще не был доступен тем, кто находится за пределами бета-списка. Поэтому я клонировал файлы проекта.

UltraVisual: демонстрация прокрутки параллакса

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

Более продвинутая демонстрация анимации прокрутки

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

Надеюсь, что это помогает вам!

Источник
Другие вопросы по тегам