Scrolling peut contrôler une animation?

Question

J'ai un UILabel qui affiche la date actuelle pour la vue actuelle de mon point de vue de défilement. Quand je défiler ce point de vue vers la gauche (aux pages de gauche), je voudrais changer cette étiquette pour la veille, avec un effet de croisement entre les 2 dates.

Je prends comme référence l'effet de fondu du Tremplin lorsque vous faites défiler la page Spotlight. Je pense que cela est similaire, mais je ne sais pas comment la mettre en œuvre!

Où dois-je placer le code, dois-je utiliser 2 ou différents UILabel CoreAnimation peut-être? Quand dois-je changer la date?

Merci d'avance!

Answer 1

1. Dans votre méthode de délégué scrollViewDidScroll:, vérifier si la contentOffset de la vue de défilement indique que l'utilisateur a fait défiler vers une autre page.
2. Dans ce cas, modifier le texte de l'étiquette à la nouvelle date. Il ne sera pas animer encore, mais le faire avant d'essayer l'animation.

3. Pour l'animation, ajoutez une CATransition à la couche de l'étiquette et le configurer à votre convenance:

   // Create a transition animation and add it to the label's layer:
   CATransition *transition = [CATransition animation];
   transition.type = kCATransitionFade;
   transition.duration = 0.25;
   [self.dateLabel.layer addAnimation:transition forKey:@"textTransition"];
   // Change the label's text as before:
   self.dateLabel.text = newDateString;
   

Cet effet est un peu différent de la disparition des icônes Tremplin (puisque ceux fondu en continu lorsque vous faites défiler plus à la page Spotlight) mais je pense que mon approche est plus appropriée pour votre application. Pour imiter l'effet de Springboard, vous devez en effet utiliser deux étiquettes distinctes (avec la même image) et modifier leurs valeurs d'opacité que les changements de contentOffset de la vue de défilement.

Answer 2

Utilisation de Core Animation avec deux étiquettes fonctionnerait très bien. Modification de la propriété d'un résultat de la couche Core Animation dans une transition en douceur par défaut, de sorte que vous pouvez utiliser à votre avantage. Par exemple:

- (void)crossfadeDateLabels
{
    date1Label.layer.opacity = 0.0f;
    date2Label.layer.opacity = 1.0f;
}

Vous pouvez également utiliser le modèle d'animation explicite si vous voulez plus de contrôle:

- (void)crossfadeDateLabels
{
    CABasicAnimation *date1Anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    date1Anim.duration = 1.0f;
    date1Anim.fromValue = [NSNumber numberWithFloat:1.0f];
    date1Anim.toValue = [NSNumber numberWithFloat:0.0f]

    // Do something similar for date2Anim...

    [date1Label.layer addAnimation:date1Anim forKey:nil];
    [date2Label.layer addAnimation:date2Anim forkey:nil];
}