How to create a UIView bounce animation?

Question

I have the following CAT transition for a UIView, called finalScoreView , which forces it to enter the screen from above:

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

How do I make it bounce once after it has lowered and then still remains? It should still enter the screen from above, and then bounce when it falls.

Any help would be greatly appreciated, thanks!

Answer 1

With iOS7 and UIKit Dynamics, you no longer need to use CAKeyframeAnimations or UIView !

Check out the Apple UIKit Dynamics Catalog app . Alternatively, Teehanlax has a clear, concise guide with a complete github project. If you need a more detailed tutorial on the intuition of dynamics, the Ray Winderlich tutorial is excellent. As always, Apple docs are a great first stop, so check out the link to the UIDynamicAnimator class in docs.

Here is some code from the 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]; 

And here are the results

UIKit Dynamics is a really powerful and convenient addition to iOS7, and you can get a great external interface from it.

Other examples:

The steps for implementing UIKit dynamics are always the same:

• Create a UIDynamicAnimator and save it in a strong property
• Create one or more UIDynamicBehaviors . Each behavior must have one or more elements, usually for animation.
• Ensure that the initial state of the elements used in the UIDynamicBehaviors is a valid state in the UIDynamicAnimator simulation.

Answer 2

A simpler alternative to the UIDynamicAnimator in iOS 7 is Spring Animation (a new and powerful UIView block animation) that can give you a nice bounce effect with fade and speed: Target 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 == very peppy. 1.0 provides smooth deceleration without exceeding.

initialSpringVelocity , roughly speaking, "the desired distance divided by the desired seconds." 1.0 corresponds to the total animation distance traveled in one second. For example, the total animation distance is 200 points, and you want the start of the animation to correspond to a viewing speed of 100 pps, use a value of 0.5.

A more detailed guide and sample application can be found in this tutorial . Hope this is useful to someone.

Answer 3

Here is a demo project that I created to help you get the animation just right. Enjoy it!

SpringDampingDemo

Answer 4

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