it-swarm.com.de

iOS-Parallax-Scrolling-Effekt (wie in der Yahoo News Digest-App)

Ich würde gerne wissen, wie man das Parallax-Scrollen ähnlich der Yahoo News Digest App implementiert. In dem Bild, in dem der Benutzer horizontal scrollen kann, wird beim Blättern in einer anderen Geschwindigkeit gescrollt.

Vielleicht machen sie es mit einem ScrollView mit Hintergrundansicht. Nicht ganz sicher Ein Hinweis zum Implementieren eines solchen Bildlaufs wäre großartig. Ich habe ähnliche Fragen geprüft, konnte aber die gesuchte Antwort nicht finden.

15

Ich habe das schon mal mit 2 Scrollviews gemacht.

Sie haben die Detailansicht für die Detailansicht und dann die Ansicht für die Parallaxe-Ansicht (oder wo immer Sie möchten).

Dann werden Sie Delegierter der Detailansicht.

In der Methode scrollView:didScroll können Sie dann den Bildlauf der Parallaxenansicht anpassen.

Wenn du nur die x-Achse machst, dann willst du so etwas ...

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

Dadurch wird festgelegt, dass der Offset der Scrollviews "Prozentsatz" für jeden Inhalt gleich ist.

Um den Parallax-Effekt zu erhalten, müssen Sie lediglich die contentSize für jeden Bildlauf ändern.

Wenn die Parallax-Bildlaufansicht eine größere Inhaltsgröße hat als die Detailbildansicht, wird der Bildlauf schneller durchgeführt. Wenn der Inhalt kleiner ist, wird der Bildlauf langsamer.

21
Fogmeister

Hier ist die Antwort. Ich untergliedere es von uitableview, damit Daten wiederverwendbar werden können, und wickeln sie in eine Ansicht ein. https://github.com/michaelhenry/MHYahooParallaxView

Danke, Kel

11
Michael Henry

100% arbeiten und Damm leicht

Zeigen Sie in imageview genau die Größe der Bildansicht an. Standardmäßig Alpha für Ansichtssatz 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;
}
0

Swift 3

So habe ich in Swift 3 einen Parallax-Effekt für eine vertikale Bildlaufleiste in einer tvOS-App erhalten.

In ViewDidLoad ():

    parallaxScrollView.delegate = self
    detailScrollView.delegate = self

Und folgendes: 

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)

}
0
Peter Wiley