Wie erstelle ich eine UIView-Bounce-Animation?

92

Ich habe die folgende CATransition für eine aufgerufene UIView finalScoreView, wodurch sie von oben auf den Bildschirm gelangt :

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 mache ich es so, dass es einmal springt, nachdem es heruntergekommen ist, und dann still bleibt? Es sollte immer noch von oben in den Bildschirm eintreten, aber dann abprallen, wenn es herunterkommt.

Jede Hilfe wäre sehr dankbar, danke!

user3127576
quelle
3
Zielen Sie auf iOS7 und höher? Wenn ja, könnten Sie UIKit Dynamics
WDUK

Antworten:

144

Mit iOS7 und UIKit Dynamics, ist es nicht mehr nötig zu verwenden CAKeyframeAnimationsoder UIViewAnimationen!

Schauen Sie sich Apples UIKit Dynamics Catalog-App an . Alternativ hat Teehanlax ein klares , präzises Tutorial mit dem vollständigen Projekt in Github . Wenn Sie ein detaillierteres Tutorial über die Vor- und Nachteile der Dynamik wünschen, ist das Ray Winderlich-Tutorial großartig. Wie immer sind die Apple-Dokumente eine gute erste Anlaufstelle. Lesen Sie daher die Referenz zur UIDynamicAnimator-Klasse in den Dokumenten.

Hier ist ein Teil 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

Quadratischer Sprung

UIKit Dynamics ist eine wirklich leistungsstarke und benutzerfreundliche Ergänzung zu iOS7, mit der Sie eine gut aussehende Benutzeroberfläche erhalten.

Andere Beispiele:

Button Bounce Schieben Sie den Sprung Springy Kollektion WWDC Sprint Sammlung

Die Schritte zum Implementieren der UIKit-Dynamik sind immer dieselben:

  1. Erstellen Sie ein UIDynamicAnimatorund speichern Sie es in einer starken Eigenschaft
  2. Erstellen Sie eine oder mehrere UIDynamicBehaviors. Jedes Verhalten sollte ein oder mehrere Elemente enthalten, normalerweise eine Ansicht zum Animieren.
  3. Stellen Sie sicher, dass der Anfangszustand der in der verwendeten Elemente UIDynamicBehaviorsein gültiger Zustand innerhalb der UIDynamicAnimatorSimulation ist.
memmons
quelle
1
Hallo Michael, vielen Dank für deine Hilfe! Das sieht auf jeden Fall sehr einfach aus! Ich habe es versucht und es funktioniert, wenn es den unteren Rand der Ansicht erreicht, aber es funktioniert nicht mit einer anderen Ansicht - stackoverflow.com/questions/21895674/… - Ich würde mich freuen, wenn Sie mir da draußen helfen könnten! :) Danke
user3127576
2
Ein MAGNIFICENT-Tutorial, ABER Sie würden nur eine Codezeile mit SpringWithDamping für einen Sprung verwenden!
Fattie
2
Können Sie ein Codebeispiel für die Uitableview-Bounce-Animation wie oben freigeben? Ich versuche es mit UITableview, bin mir aber nicht sicher, wo ich anfangen soll.
Dinesh
1
UIKit Dynamics eignet sich hervorragend für Beispielfälle. Aber wenn es um echte Aufgaben geht, sehen Sie, wie roh und eingeschränkt es ist. Ein großes Problem ist das Überschreiben von UIDynamicItemBehavior(was eigentlich Eigenschaften sind, nicht Verhalten). Sie können nicht einfach unterschiedliche physikalische Eigenschaften in unterschiedlichen Verhaltensweisen verwenden. Ein anderer Fall ist die Implementierung von UIScrollView-ähnlichen Gummibändern - es ist sehr kompliziert. Ich kann noch mehr schreiben, aber der Kommentar ist zu kurz.
Kelin
2
Bitte fügen Sie den vollständigen Code hinzu. Ihr Code beschreibt, wie man erstellt UIDynamicAnimatorund damit verbundene Objekte, antwortet aber nicht, wie man sie verwendet
Vyachaslav Gerchicov
261

Eine einfachere Alternative zu UIDynamicAnimatoriOS 7 ist Spring Animation (eine neue und leistungsstarke UIView-Blockanimation), mit der Sie einen schönen Bouncing-Effekt mit Dämpfung und Geschwindigkeit erzielen können: Ziel C.

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

Schnell

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 == sehr federnd. 1.0 macht es sanft abbremsen ohne zu überschießen.

initialSpringVelocityist ungefähr "gewünschte Entfernung, geteilt durch gewünschte Sekunden". 1,0 entspricht der gesamten Animationsentfernung, die in einer Sekunde zurückgelegt wurde. Beispiel: Die gesamte Animationsentfernung beträgt 200 Punkte. Wenn der Beginn der Animation einer Ansichtsgeschwindigkeit von 100 pt / s entspricht, verwenden Sie einen Wert von 0,5.

Ein ausführlicheres Tutorial und eine Beispiel-App finden Sie in diesem Tutorial . Ich hoffe das ist nützlich für jemanden.

huong
quelle
2
Hier ist ein Demo-Projekt, das ich erstellt habe, um Ihnen zu helfen, die Animation genau richtig zu machen. Genießen! github.com/jstnheo/SpringDampingDemo
jstn
Prost auf das Demo-Projekt, Kumpel. Hilft wirklich dabei, diese Werte herauszufinden, da sie ziemlich stumpf sind. Ich wünschte, Apple hätte sie klarer gemacht
Kakubei
32

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

SpringDampingDemo

Geben Sie hier die Bildbeschreibung ein

jstn
quelle
Prost auf das Demo-Projekt, Kumpel. Hilft wirklich dabei, diese Werte herauszufinden, da sie ziemlich stumpf sind. Ich wünschte, Apple hätte sie klarer gemacht
Kakubei
-1
- (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) {
    }];
}
}
Spydy
quelle
1
Der Code enthält keine Erklärung und keinen Kommentar. Dies ist nicht hilfreich
Lorenzo