Wie erstellt man eine UIView Bounce-Animation?

Question

Ich habe folgendes CATransition für eine UIView genannt finalScoreView, die es geben Sie den Bildschirm von oben macht:

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

Wie kann ich es so machen es einmal springt, nachdem es nach unten geht, dann bleibt immer noch? Es sollte immer noch von oben auf den Bildschirm kommen, aber dann abspringen, wenn es herunterkommt.

Jede Hilfe wäre sehr geschätzt, danke!

Answer 1

Mit iOS7 und UIKit Dynamics müssen keine CAKeyframeAnimations oder UIView Animationen mehr verwendet werden!

Werfen Sie einen Blick auf Apple's UIKit Dynamics Catalog app. Alternativ Teehanlax has a clear, concise tutorial mit der full project in github. Wenn Sie ein detaillierteres Tutorial über die Ein- und Ausgänge der Dynamik wünschen, ist das Ray Winderlich tutorial großartig. Wie immer, die Apple Docs sind eine gute erste Anlaufstelle, also schauen Sie sich die UIDynamicAnimator Class reference in der Dokumentation an.

Hier ist ein Bit des Codes aus dem Teenhanlax Tutorial:

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

Und hier sind die Ergebnisse

UIKit Dynamics ist ein wirklich leistungsfähiges und einfach neben iOS7 zu bedienen und Sie können ein tolles UI daraus machen.

Weitere Beispiele:

Die Schritte UIKit Dynamik zu implementieren, ist immer das gleiche:

1. ein UIDynamicAnimator erstellen und speichern sie in einer starken Eigenschaft
2. Cre aß einen oder mehrere UIDynamicBehaviors. Jedes Verhalten sollte ein oder mehrere Elemente enthalten, normalerweise eine Ansicht zum Animieren.
3. Stellen Sie sicher, dass der Ausgangszustand der in UIDynamicBehaviors verwendeten Elemente ein gültiger Status innerhalb der UIDynamicAnimator Simulation ist.

Answer 2

Eine einfachere Alternative zu UIDynamicAnimator in iOS 7 ist Frühling Animationen (eine neue und leistungsfähige UIView Block Animation), die Sie Effekt schöne Prellen mit Dämpfung und Geschwindigkeit geben kann: 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 
     }) 

usingSpringWithDamping 0,0 == sehr federnd. 1.0 macht es reibungslos verzögern ohne Überschwingen.

initialSpringVelocity ist grob "gewünschte Entfernung, geteilt durch gewünschte Sekunden". 1.0 entspricht der gesamten in einer Sekunde zurückgelegten Animationsentfernung. Beispiel: Die Gesamtanimationsdistanz beträgt 200 Punkte. Sie möchten, dass der Beginn der Animation mit einer Ansichtsgeschwindigkeit von 100 pt/s übereinstimmt. Verwenden Sie einen Wert von 0,5.

Detailliertere Anleitung und Beispiel-App finden Sie in diesem tutorial. Ich hoffe, das ist nützlich für jemanden.

Answer 3

- (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) { 
    }]; 
} 
} 

Answer 4

Hier ist ein Demo-Projekt, das ich erstellt habe, um Ihnen zu helfen, die Animation genau richtig zu bekommen. Genießen!

SpringDampingDemo