Jak utworzyć animację Bounce UIView?

Mam następujące CATransition dla UIView o nazwie finalScoreView, co sprawia, że wchodzi na ekran od góry: 

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"];

Jak sprawić, by odbił się raz po zejściu, a potem pozostał nieruchomy? Powinien nadal wejść na ekran od góry, ale następnie odbić się, gdy zejdzie.

Każda pomoc będzie bardzo mile widziana, dzięki!

Author: memmons, 2014-02-20
Source

4 answers

Dzięki iOS7 i UIKit Dynamics nie ma już potrzeby używania animacji CAKeyframeAnimations ani UIView!

Spójrz na aplikację Apple UIKit Dynamics Catalog . Dodatkowo, Teehanlax ma przejrzysty, zwięzły samouczek z pełnym projektem w GitHubie . Jeśli chcesz uzyskać bardziej szczegółowy samouczek na temat ins-and-out dynamiki, Ray Winderlich tutorial jest świetny. Jak zawsze, dokumenty Apple są świetnym pierwszym przystankiem, więc sprawdź UIDynamicAnimator Odniesienie do klasy w dokumentacji.

Oto fragment kodu z tutoriala 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];

A oto wyniki

Square bounce

UIKit Dynamics jest naprawdę potężnym i łatwym w użyciu dodatkiem do iOS7 i możesz z niego uzyskać świetnie wyglądający interfejs użytkownika.

Inne przykłady:

Button bounceSlide bounceWiosenna kolekcjaWWDC sprint collection

Kroki implementacji UIKit dynamics są zawsze takie same:

  1. Stwórz UIDynamicAnimator i przechowuj go w mocnym własność
  2. Utwórz jedną lub więcej UIDynamicBehaviors. Każde zachowanie powinno mieć jeden lub więcej elementów, zazwyczaj widok do animacji.
  3. upewnij się, że stan początkowy elementów użytych w UIDynamicBehaviors jest prawidłowym stanem w symulacji UIDynamicAnimator.
 137
Author: memmons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-24 00:40:10

Prostszą alternatywą dla UIDynamicAnimator w iOS 7 jest animacja Spring (nowa i potężna Animacja bloku UIView), która może dać ładny efekt odbicia z tłumieniem i prędkością: Objective C 

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

Swift 

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 == bardzo sprężyste. 1.0 sprawia, że płynnie zwalnia bez przekroczenia prędkości.

initialSpringVelocity jest, mniej więcej, "pożądaną odległością, podzieloną przez pożądane sekundy". 1.0 odpowiada całkowitej animacji odległość pokonana w ciągu jednej sekundy. Na przykład, całkowita odległość animacji wynosi 200 punktów i chcesz, aby początek animacji był zgodny z prędkością widoku 100 pkt / s, użyj wartości 0.5.

Bardziej szczegółowy samouczek i przykładowa aplikacja można znaleźć w tym samouczek . Mam nadzieję, że to się komuś przyda.

 236
Author: friedegg-bacon-sandwich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-17 08:24:55

Oto projekt demo, który stworzyłem, aby pomóc ci uzyskać animację w sam raz. Smacznego!

SpringDampingDemo

Tutaj wpisz opis obrazka

 26
Author: jstn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-15 00:17:01 
- (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
Author: Spydy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-09 14:51:09