web-dev-qa-db-fra.com

Comment créer une animation de rebond UIView?

J'ai la CATTransition suivante pour UIView appelée finalScoreView, ce qui la fait entrer dans l'écran du haut:

CATransition *animation = [CATransition animation];
animation.duration = 0.2;
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromBottom;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[gameOver.layer addAnimation:animation forKey:@"changeTextTransition"];
[finalScoreView.layer addAnimation:animation forKey:@"changeTextTransition"];

Comment puis-je le faire pour qu'il rebondisse une fois après sa chute, puis reste immobile? Il devrait quand même entrer dans l’écran par le haut mais ensuite rebondir quand il descend.

Toute aide serait très appréciée, merci!

iosiphoneanimationuiviewuikit
88
user3127576

Avec iOS7 et UIKit Dynamics, il n'est plus nécessaire d'utiliser les animations CAKeyframeAnimations ou UIView!

Jetez un coup d'œil à application du catalogue UIKit Dynamics de Apple . Alternativement, Teehanlax a un tutoriel clair et concis avec le projet complet dans github . Si vous souhaitez un tutoriel plus détaillé sur les tenants et les aboutissants de la dynamique, le tutoriel de Ray Winderlich est génial. Comme toujours, les docs Apple sont un bon premier arrêt, alors consultez le référence de la classe UIDynamicAnimator dans les docs.

Voici un extrait du code du didacticiel Teenhanlax:

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior* gravityBehavior = 
                [[UIGravityBehavior alloc] initWithItems:@[self.redSquare]];
[self.animator addBehavior:gravityBehavior];

UICollisionBehavior* collisionBehavior = 
                [[UICollisionBehavior alloc] initWithItems:@[self.redSquare]]; 
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collisionBehavior];

UIDynamicItemBehavior *elasticityBehavior = 
                [[UIDynamicItemBehavior alloc] initWithItems:@[self.redSquare]];
elasticityBehavior.elasticity = 0.7f;
[self.animator addBehavior:elasticityBehavior];

Et voici les résultats

Square bounce

UIKit Dynamics est un complément très puissant et facile à utiliser pour iOS7 et vous permet d'obtenir une superbe interface utilisateur.

Autres exemples:

Button bounceSlide bounceSpringy collectionWWDC sprint collection

Les étapes pour implémenter la dynamique UIKit sont toujours les mêmes:

  1. Créer un UIDynamicAnimator et le stocker dans une propriété forte
  2. Créez un ou plusieurs UIDynamicBehaviors. Chaque comportement doit avoir un ou plusieurs éléments, généralement une vue à animer.
  3. Assurez-vous que l'état initial des éléments utilisés dans UIDynamicBehaviors est un état valide dans la simulation UIDynamicAnimator.
140
memmons

Une alternative plus simple à UIDynamicAnimator dans iOS 7 est Spring Animation (une nouvelle et puissante animation de bloc UIView), qui peut vous donner un bel effet de rebond avec amortissement et vélocité: Objective C 

[UIView animateWithDuration:duration
  delay:delay
  usingSpringWithDamping:damping
  initialSpringVelocity:velocity
  options:options animations:^{
    //Animations
    }
  completion:^(BOOL finished) {
    //Completion Block
}];

Rapide 

UIView.animateWithDuration(duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

Swift 4.0 

UIView.animate(withDuration:duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

usingSpringWithDamping 0.0 == très dynamique. 1.0 permet une décélération douce sans dépassement.

initialSpringVelocity est, en gros, "la distance désirée, divisée par les secondes désirées". 1.0 correspond à la distance totale d'animation parcourue en une seconde. Par exemple, la distance totale de l'animation est de 200 points et si vous souhaitez que le début de l'animation corresponde à une vitesse d'affichage de 100 pt/s, utilisez une valeur de 0,5.

Un tutoriel plus détaillé et un exemple d'application peuvent être trouvés dans ceci tutorial . J'espère que cela est utile pour quelqu'un.

248
huong

Voici un projet de démonstration que j'ai créé pour vous aider à obtenir une animation parfaite. Prendre plaisir!

SpringDampingDemo

enter image description here

31
jstn
- (IBAction)searchViewAction:(UIButton*)sender
{
  if(sender.tag == 0)
  {
    sender.tag = 1;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.Origin.x = -320;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.Origin.x = 320;
    self.searhTopView.frame = optionsFrame;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.Origin.x = 0;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];        
}
else
{
    sender.tag = 0;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.Origin.x = 0;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.Origin.x = 320;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.Origin.x = 320;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];
}
}
1
Spydy