如何创建一个 UIView 弹跳动画？

With iOS7 and UIKit Dynamics, there is no longer any need to use CAKeyframeAnimations or UIView animations!

Take a look at Apple's UIKit Dynamics Catalog app. Alternately, Teehanlax has a clear, concise tutorial with the full project in github. If you want a more detailed tutorial about the ins-and-outs of dynamics, the Ray Winderlich tutorial is great. As always, the Apple docs are a great first stop, so check out the UIDynamicAnimator Class reference in the docs.

Here's a bit of the 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 easy to use addition to iOS7 and you can get some great looking UI from it.

Other examples:

The steps to implement UIKit dynamics is always the same:

1. Create a UIDynamicAnimator and store it in a strong property
2. Create one or more UIDynamicBehaviors. Each behavior should have one or more items, typically a view to animate.
3. Make sure that the initial state of the items used in the UIDynamicBehaviors is a valid state within the UIDynamicAnimator simulation.

A simpler alternative to UIDynamicAnimator in iOS 7 is Spring Animation (a new and powerful UIView block animation), which can give you nice bouncing effect with damping and velocity: 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 == very bouncy. 1.0 makes it smoothly decelerate without overshooting.

initialSpringVelocity is, roughly, "desired distance, divided by desired seconds". 1.0 corresponds to the total animation distance traversed in one second. Example, total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5.

More detailed tutorial and sample app can be found in this tutorial. I hope this is useful for someone.

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

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

SpringDampingDemo