Эффект прокрутки iOS Parallax (например, в приложении Yahoo News Digest)

Я хотел бы знать, как реализовать прокрутку параллакса, подобную приложению Yahoo News Digest. Когда пользователь прокручивает горизонтальное фоновое изображение, прокручивается с другой скоростью, когда пейджинг включен.

Может быть, они делают это с помощью ScrollView с фоном. Не совсем уверен. Подсказка для реализации такой прокрутки была бы замечательной. Я проверил похожие вопросы, но не смог найти ответ, который я искал.

Ответ 1

Я сделал это раньше, используя 2 scrollviews.

У вас есть вид прокрутки основной детали, а затем прокрутка прокрутки параллакса позади него (или там, где вы хотите).

Затем вы становитесь делегатом подробного прокрутки.

В методе scrollView:didScroll вы можете отрегулировать прокрутку представления параллакса.

Если вы просто выполняете ось x, тогда вы хотите что-то вроде этого...

CGFloat detailMaxOffset = self.detailScrollView.contentSize.width - CGRectGetWidth(self.scrollView.frame);

CGFloat percentage = self.detailScrollView.contentOffset.x / maxOffset;

CGFloat parallaxMaxOffset = self.parallaxScrollView.contentSize.width - CGRectGetWidth(self.parallaxScrollView.frame);

[self.parallaxScrollView setContentOffset:CGPointMake(percentage * parallaxOffset, 0);

Это приведет к тому, что смещение содержимого прокрутки "процент" будет одинаковым для каждого.

Чтобы получить эффект параллакса, вам просто нужно сделать contentSize каждого прокрутки разным.

Если вид прокрутки параллакса имеет больший размер содержимого, чем просмотр прокрутки детали, он будет прокручиваться быстрее. Если он имеет меньший размер контента, он будет прокручиваться медленнее.

Ответ 2

Вот ответ. Я подклассифицирую его из uitableview, чтобы данные можно было повторно использовать и обернуть в uiview. https://github.com/michaelhenry/MHYahooParallaxView

Спасибо, Кель

Ответ 3

100% работа и просты

Взгляните на изображение, чтобы точно посмотреть размер изображения. по умолчанию alpha для представления set 0.

//MARK: Scroll View Delegate methods
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

  NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

CGFloat scrollY = _mainScrollView.contentOffset.y;
CGFloat height = _alphaView.frame.size.height;

CGFloat alphaMonitor = scrollY/height;

_alphaView.alpha = alphaMonitor;
}

Ответ 4

Swift 3

Вот как я получил эффект параллакса для работы в Swift 3 для вертикальной прокрутки в приложении tvOS.

В ViewDidLoad():

    parallaxScrollView.delegate = self
    detailScrollView.delegate = self

И далее:

override func viewDidLayoutSubviews() {
        self.detailScrollView!.contentSize = CGSize(width: 1920, height: 2700)
        self.parallaxScrollView?.contentSize = CGSize(width: 1920, height: 3000)
    }


//// THE SCROLL VIEW

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    // Parallax effect
    let detailMaxOffset = self.detailScrollView.contentSize.height - self.detailScrollView.frame.height;
    let percentage = self.detailScrollView.contentOffset.y / detailMaxOffset
    let parallaxMaxOffset = self.parallaxScrollView.contentSize.height - self.parallaxScrollView.frame.height;
    let parallaxOffset = CGPoint(x:0,y:(percentage * parallaxMaxOffset))
    self.parallaxScrollView.setContentOffset((parallaxOffset), animated: false)

}