ios 如何创建 UIView 弹跳动画？

How to create a UIView bounce animation?

提问by user3127576

I have the following CATransition for a UIView called finalScoreView, which makes it enter the screen from the top:

我有一个名为 的 UIView 的以下 CATransition finalScoreView，这使它从顶部进入屏幕：

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 so it bounces once after it comes down, then stays still? It should still enter the screen from the top but then bounce when it comes down.

我如何使它在下降后反弹一次，然后保持静止？它应该仍然从顶部进入屏幕，但在它下降时会反弹。

Any help would be much appreciated, thanks!

任何帮助将不胜感激，谢谢！

回答by huong

A simpler alternative to UIDynamicAnimatorin 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

UIDynamicAnimator在 iOS 7 中的一个更简单的替代品是 Spring Animation（一种新的强大的 UIView 块动画），它可以给你很好的阻尼和速度的弹跳效果： 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

斯威夫特 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
        })

usingSpringWithDamping0.0 == very bouncy. 1.0 makes it smoothly decelerate without overshooting.

usingSpringWithDamping0.0 == 非常有弹性。1.0使其平稳减速而不会超调。

initialSpringVelocityis, 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.

initialSpringVelocity粗略地说，是“所需距离除以所需秒数”。1.0 对应于一秒内遍历的总动画距离。例如，总动画距离为 200 点，并且您希望动画的开始与 100 pt/s 的视图速度相匹配，请使用值 0.5。

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

更详细的教程和示例应用程序可以在本教程中找到。我希望这对某人有用。

回答by memmons

With iOS7 and UIKit Dynamics, there is no longer any need to use CAKeyframeAnimationsor UIViewanimations!

使用 iOS7 和 UIKit Dynamics，不再需要使用CAKeyframeAnimations或UIView动画！

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

看看Apple 的 UIKit Dynamics Catalog 应用程序。或者，Teehanlax 有一个清晰、简洁的教程，其中包含github 中的完整项目。如果您想要有关动力学来龙去脉的更详细教程，Ray Winderlich 教程非常棒。与往常一样，Apple 文档是很好的第一站，因此请查看文档中的UIDynamicAnimator 类参考。

Here's a bit of the code from the Teenhanlax tutorial:

下面是来自 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];

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.

UIKit Dynamics 是 iOS7 的一个非常强大且易于使用的附加组件，您可以从中获得一些漂亮的 UI。

Other examples:

其他例子：

The steps to implement UIKit dynamics is always the same:

实现 UIKit 动态的步骤始终相同：

1. Create a UIDynamicAnimatorand 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 UIDynamicBehaviorsis a valid state within the UIDynamicAnimatorsimulation.

1. 创建一个UIDynamicAnimator并将其存储在一个强大的属性中
2. 创建一个或多个UIDynamicBehaviors. 每个行为都应该有一个或多个项目，通常是一个动画视图。
3. 确保在 中使用的项目的初始状态UIDynamicBehaviors是UIDynamicAnimator模拟中的有效状态。

回答by jstn

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

这是我创建的一个演示项目，以帮助您正确制作动画。享受！

SpringDampingDemo

弹簧阻尼演示

回答by Spydy

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