Parallax-Effekt mit UIScrollView Untersichten

Ich versuche zu schaffen, einen Parallax-Effekt auf ein UIView innerhalb eines UIScrollView.
Die Wirkung scheint zu funktionieren, aber nicht so gut.

  1. Zuerst füge ich zwei UIView sub-views zu einem UIScrollView und legen Sie die UIScrollViews contentSize.
  2. Die Ansichten zusammenfassen und erstellen einer contentSize von {320, 1000}.

  3. Dann habe ich implementiert die folgenden in scrollViewDidScroll:

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y;

    CGFloat percentage = offsetY / scrollView.contentSize.height;

    NSLog(@"percent = %f", percentage);

    if (offsetY < 0) {

        firstView.center = CGPointMake(firstView.center.x, firstView.center.y - percentage * 10);

    } else if (offsetY > 0){

        firstView.center = CGPointMake(firstView.center.x, firstView.center.y + percentage * 10);

    }
}

Diese Codezeilen erstellen eine Parallaxe-Effekt, aber das scrollen geht weiter, den Blick nicht zurück zu seiner ursprünglichen position, wenn ich scrollen, um die ursprüngliche Ausgangsposition.

Ich habe versucht, Manipulation der Ansichten, Ebenen und Rahmen, alle mit dem gleichen Ergebnis.

Jede Hilfe wird sehr geschätzt.

  • Die bedingte beträgt Prozentsatz = fabs(Prozentsatz); und das scheint falsch. Wie sieht es aus, wenn Sie ersetzen die bedingte mit nur den else-block?
  • Ich habe nicht versucht, diese, so keine Antwort, aber dieser code sieht vielversprechend zu mir: github.com/ralfbernert/RBParallaxScrolling/blob/master/...
  • wenn ich die Stelle des "ob", sondern nur mit dem "anderen", immer wenn ich nach unten scrollen (offset = -x) die Sicht wird langsam hüpfen.
  • Ich fügte hinzu, ein Bearbeiten, um meine Antwort zu erklären, numerisch, warum dein problem besteht.
InformationsquelleAutor Raz | 2014-03-05
  1. 15

    Das problem, das Sie haben ist, dass Sie stützt Ihre sekundäre scrollen auf einem Verhältnis der offset zu groß, nicht nur auf dem aktuellen offset. Wenn Sie also ein Anstieg von einem offset von 99 auf 100 (von sagen wir 100) das sekundäre scroll erhöht sich um 10, aber wenn Sie gehen zurück auf die 99 Ihre sekundären Blättern nur sinkt um 9,9, und ist somit nicht mehr an der gleichen Stelle wie letztes mal warst du bei der 99. Nicht-lineare scrollen ist möglich, aber nicht so, wie Sie es tun.

    Ein möglichst einfacher Weg, damit umzugehen, ist das erstellen einer zweiten scrollview und platzieren Sie es unter Ihrem tatsächlichen scrollview. Machen Sie es nicht unlösbar ( setUserInteractionEnabled:false ), und ändern Sie es contentOffset während der Haupt-scrolling delegieren, anstatt zu versuchen, zu bewegen, eine UIImageView manuell.

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [scrollView2 setContentOffset:CGPointMake(scrollView.contentOffset.x,scrollView.contentOffset.y * someScalingFactor) animated:NO];
}

    Aber stellen Sie sicher, nicht um eine Stellvertretung für die scrollView2, sonst erhalten Sie möglicherweise eine kreisförmige delegieren den Aufruf der Methode, dass wird nicht gut enden für Sie.

    • Wie die github-ref aber erfreulich einfacher +1. Werden Sie sicher, dass scrollView2 Inhalt umfasst die bounce-Regionen der Vorder-Ansicht.
    • Das Prellen ist eine übung für den Schöpfer, aber definitiv ja. Ich fand, dass der Betrag, der bounce auf dem iPad möglich ist, in 37% der Bildschirmbreite oder-Höhe, nur für die Referenz, in diesem Fall.
    • danke für die Antwort. wenn Sie sagen, Platz scrollView2 unter der eigentlichen scrollview, Sie bedeutet, dass es ein Z-index?
    • Nein, legen Sie ihn einfach in Ihrer view-Hierarchie, in welcher position Sie möchten, es zu sein. Sie können bringSubviewToFront oder sendSubviewToBack im UIView ist, um das Endergebnis, die Sie möchten.
    • Getestet und es Funktioniert perfekt! danke!!!!
    • schöne Lösungen.Danke!

    InformationsquelleAutor Putz1103
  2. 4

    Skalierungsfaktor als Schlüssel-element...

    ...lassen Sie mich bieten eine 1:1 Berechnung:

    Annahme: 2 UIScrollView man in der Vorder-und auf der Rückseite, unter der Annahme Vordergrund steuert die hinteren, und weiter vorausgesetzt, dass eine in voller Breite in den Vordergrund entspricht, in voller Breite in den hintergrund, die Sie anschließend anwenden müssen, im Vordergrund Verhältnis, nicht im Vordergrund offset.

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let foreSpan = foreScrolView.bounds.width - foreScrolView.contentSize.width
    let foreRatio = scrollView.contentOffset.x / foreSpan
    let rearSpan = rearScrollView.bounds.width - rearScrollView.contentSize.width
    rearScrollView.setContentOffset(
        CGPoint(x: foreRatio * rearSpan, y: 0),
        animated: false)
}

    Endgültige Wirkung

    Parallax-Effekt mit UIScrollView Untersichten

    Den beiden scrollers, Vorder-und Rückseite, enthalten jeweils eine UIImageView angezeigt in seiner ganzen Breite:

    let foreImg = UIImageView.init(image: UIImage(named: "fore"))
foreImg.frame = CGRect(x: 0, y: 0,
                       width: foreImg.frame.width,
                       height: foreScrolView.bounds.height)
foreScrolView.contentSize = foreImg.frame.size
foreScrolView.addSubview(foreImg)

let rearImg = UIImageView.init(image: UIImage(named: "rear"))
rearImg.frame = CGRect(x: 0, y: 0,
                       width: rearImg.frame.width,
                       height: rearScrollView.bounds.height)
rearScrollView.contentSize = rearImg.frame.size
rearScrollView.addSubview(rearImg)

    Diesen Blättern, beide Bilder in einer anderen Geschwindigkeit, zu jedem Bild vollständig von Kante zu Kante.

    ► Finde diese Lösung auf GitHub und weitere details auf Swift-Rezepte.

    InformationsquelleAutor SwiftArchitect
Schreibe einen Kommentar