L'effet de parallaxe avec UIScrollView des sous-vues

Je suis en train de créer un effet de Parallaxe sur une UIView à l'intérieur d'un UIScrollView.
L'effet semble fonctionner, mais pas si bien.

  1. J'ai d'abord ajouter deux UIView sous-vues à un UIScrollView et définir la UIScrollViews contentSize.
  2. Le point de Vue de la somme et de créer un contentSize de {320, 1000}.

  3. Puis j'ai mis en place les éléments suivants dans 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);

    }
}

Ces lignes de code à faire créer un effet de parallaxe, mais comme le défilement continue, la vue ne retourne pas à sa position d'origine si j'ai faites défiler jusqu'à l'origine de la position de départ.

J'ai essayé de manipuler les points de vue des couches et des châssis, tous avec les mêmes résultats.

Toute Aide sera très appréciée.

  • Les montants conditionnels en pourcentage = fabs(en pourcentage);, et qui semble erroné. Comment est-il lorsque vous remplacez le conditionnel avec juste le bloc else?
  • Je n'ai pas essayé, donc pas une réponse, mais ce code semble plus prometteuse pour moi: github.com/ralfbernert/RBParallaxScrolling/blob/master/...
  • si je remplace le "si" avec le "else", lorsque j'ai jamais faites défiler vers le bas (offset = -x) le point de vue va lentement rebondir de haut.
  • J'ai ajouté une modification à ma réponse à expliquer numériquement pourquoi votre problème existe.
InformationsquelleAutor Raz | 2014-03-05
  1. 15

    Le problème que vous avez est que vous vous basez votre secondaire de défilement sur un ratio de compensation pour la taille, et pas seulement sur le décalage actuel. Ainsi, lorsque vous augmentez d'un décalage de 99 à 100 (sur 100) secondaire de défilement augmente par 10, mais quand vous allez à l'arrière en bas à 99 secondaire de défilement ne diminue que de 9,9, et ainsi il n'est plus dans le même endroit que c'était la dernière fois que vous étiez à 99. Non-linéaire de défilement est possible, mais pas la façon dont vous le faites.

    Un possible moyen plus facile de régler ce problème est de créer un deuxième scrollview et placez-la sous votre scrollview. De le rendre insoluble (setUserInteractionEnabled:false) et de le modifier c'est contentOffset en cours de défilement délégué au lieu d'essayer de déplacer une UIImageView manuellement.

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

    Mais assurez-vous de ne pas établir un délégué pour la scrollView2, sinon vous risquez d'obtenir une circulaire délégué appel de méthode qui ne finit pas bien pour vous.

    • Comme le github ref mais agréablement simple +1. Assurez-vous que scrollView2 du contenu englobe le rebond des régions de l'avant-plan de la vue.
    • Le rebond est un exercice pour le créateur, mais certainement oui. J'ai trouvé que la quantité de rebond possible sur l'iPad est de 37% de la largeur de l'écran ou de la hauteur, juste pour la référence à cet événement.
    • merci pour la réponse. quand vous dites lieu scrollView2 en dessous de la réelle scrollview, tu veux dire en lui donnant un index alphabétique?
    • Non, il suffit de le placer dans votre point de vue de la hiérarchie dans la position que vous voulez qu'il soit. Vous pouvez utiliser bringSubviewToFront ou sendSubviewToBack dans UIView pour obtenir le résultat final que vous souhaitez.
    • Testé et il Fonctionne parfaitement! merci!!!!
    • nice solutions.Merci!

    InformationsquelleAutor Putz1103
  2. 4

    Facteur d'échelle étant l'élément clé de la...

    ...permettez-moi de vous donner un 1:1 calcul:

    En supposant que 2 UIScrollView, celui au premier plan et à l'arrière, en supposant que les contrôles de premier plan à l'arrière, et encore en supposant qu'une pleine largeur à l'avant-plan correspond à une pleine largeur à l'arrière-plan, vous devez ensuite appliquer l'avant ratio, pas l'avant décalage.

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

    Effet Final

    L'effet de parallaxe avec UIScrollView des sous-vues

    Les deux ascenseurs, l'avant et l'arrière, contiennent chacune un UIImageView affiche à sa pleine largeur:

    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)

    Cela permettra de faire défiler les deux images à une vitesse différente, couvrant chaque image de bord à bord.

    ► Trouver cette solution sur GitHub et des détails supplémentaires sur Swift Recettes.

    InformationsquelleAutor SwiftArchitect