Développement iOS
  1. Développement iOS
  3. Animer plusieurs vues où l'une commence avant l'autre
Intereting Posts
Apple Swift: comment get les secondes actuelles en 1/100 ou 1/1000? Est-il possible de lire une video en utilisant Avplayer en arrière-plan? Obtenir la position d'UIView par rapport à sa vue d'set Comment accéder à un calque dans la class personnalisée UIView générer avec Paintcode? Utilisation du code cloud avec le server d'parsing et Heroku Solutions de modélisation de class pour l'objective C Affichage des données Plist dans UItableview Créer une connection SSL à l'aide d'un certificate Convertir une NSData JSON en NSDictionary Personnalisation de l'arrière-plan de la vue UIPopoverController et de la couleur de la bordure Comment annuler un UIWebView? Impossible d'utiliser le framework iOS qui utilise le file .xib en interne Comment puis-je append un UITapGestureRecognizer à un UILabel dans une cellule de vue de table? Comment utiliser CMMotionActivityManager et recevoir des mises à jour? Structures mutables rapides dans la fermeture de class et struct se comportent différemment

Animer plusieurs vues où l'une commence avant l'autre

Je voudrais animer plusieurs vues, qui sont essentiellement des carrés qui grossissent puis returnnent à la taille d'origine. Le nombre de vues peut varier et sont animées dans un ordre séquentiel, où l'animation d'une vue commence juste avant la fin de la vue précédente. J'ai essayé ce qui suit: 

for (int i = 0; i < length; i++) { SView *view = _row[i]; view.widthConstraint.constant *= 1.1; view.heightConstraint.constant *= 1.1; [UIView animateWithDuration:1 delay:1 * i options:UIViewAnimationOptionCurveEaseInOut animations:^{ [self.view layoutIfNeeded]; } completion:^(BOOL finished) { view.widthConstraint.constant /= 1.1; view.heightConstraint.constant /= 1.1; [UIView animateWithDuration:.1 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ [self.view layoutIfNeeded]; } completion:^(BOOL finished) { }]; }]; } }

Cela finit par être très saccadé et "clignotant", si cela a du sens, et rien de ce que j'attendais. Une idée de comment réaliser cette animation séquentielle tout en la rendant très fluide?

La bonne façon de le faire est d'utiliser des images keys. Cela rend le code beaucoup plus propre. Les methods UIView à utiliser sont les suivantes:

animateKeyframesWithDuration: delay: options: animations: achèvement: addKeyframeWithRelativeStartTime: relativeDuration: animations:

Exemple simple

Voici un exemple simple sur la façon de l'utiliser: 

 [UIView animateKeyframesWithDuration:0.25 delay:0 options: UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{ [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.7 animations:^{ avatarView.transform = CGAffineTransformMakeScale(0.9, 0.9); }]; [UIView addKeyframeWithRelativeStartTime:0.7 relativeDuration:0.3 animations:^{ avatarView.transform = CGAffineTransformIdentity; }]; } completion:nil];

L'idée est que vous définissiez une durée globale, puis divisiez le time de chaque animation individuelle et que vous la retardiez par rapport à l'animation globale.

Exemple de boucle

Si vous avez plusieurs vues devant être des images keys, vous pouvez en fait avoir une boucle dans le bloc d'animation. Cela permet un code flexible et dynamic. Voici un exemple de projet et du code: 

 [UIView animateKeyframesWithDuration:1.0 delay:0 options: UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{ for (int i = 0; i < numberOfViews; i++) { [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:(duration / numberOfViews) animations:^{ ... animate view ... }]; } } completion:nil];

Une façon beaucoup plus propre d'animer est d'utiliser animateKeyframesWithDuration:delay:options:animations:completion: et addKeyframeWithRelativeStartTime:relativeDuration:animations: Cherchez juste comment utiliser cette API.

Je pense que vous findez que cela finit par être beaucoup plus propre et plus clair.