如何创建UIView反弹动画？

Question

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

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

如何制作它以便在它降下后反弹，然后保持静止？它应该仍然从顶部进入屏幕，但在它关闭时反弹。

非常感谢任何帮助，谢谢！

Answer 1

iOS 7中UIDynamicAnimator的一个更简单的替代方法是Spring Animation（一种新的强大的UIView块动画），它可以通过阻尼和速度为您提供良好的弹跳效果： 目标C

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

<强>夫特

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 ==非常有弹性。 1.0使其平稳减速而不会过冲。

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

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

Answer 2

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

看看Apple's UIKit Dynamics Catalog app。或者，Teehanlax has a clear, concise tutorial与full project in github。如果你想要一个关于动力学细节的更详细的教程，Ray Winderlich tutorial很棒。与往常一样，Apple文档是一个很好的第一站，所以请查看文档中的UIDynamicAnimator Class reference。

以下是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];

以下是结果

UIKit Dynamics是iOS7中非常强大且易于使用的附加功能，您可以从中获得一些外观漂亮的用户界面。

其他例子：

实施UIKit动态的步骤始终如一：

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

Answer 3

这是我创建的一个演示项目，可以帮助您获得恰到好处的动画效果。请享用！

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