如何创建 UIView 弹跳动画？

Posted 2023-02-18

【中文标题】如何创建 UIView 弹跳动画？

【英文标题】：How to create a UIView bounce animation?

【发布时间】：2014-03-20 11:15:43

【问题描述】：

我为名为@9​​87654321@ 的 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"];

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

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

【问题讨论】：

你的目标是ios7及以上吗？如果是这样，您可以利用 UIKit Dynamics

【参考方案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 中找到更详细的教程和示例应用程序。我希望这对某人有用。

【讨论】：

这是我创建的一个演示项目，可帮助您获得恰到好处的动画。享受！ github.com/jstnheo/SpringDampingDemo

为那个演示项目干杯，伙计。确实有助于弄清楚这些值，因为它们非常迟钝。我希望苹果能让它们更清楚

【参考方案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 的一个非常强大且易于使用的补充，您可以从中获得一些漂亮的 UI。

其他例子：

实现UIKit动态的步骤总是一样的：

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

【讨论】：

嗨迈克尔，非常感谢您的帮助！这绝对看起来非常容易做到！我试过了，当它到达视图的底部时它可以工作，但它不适用于另一个视图 - ***.com/questions/21895674/… - 如果你能帮助我，我会很高兴！ :) 谢谢

一个很棒的教程，但是你只需使用一行代码，使用 SpringWithDamping，就可以反弹！

你能分享一些上面的 Uitableview 弹跳动画的代码示例吗？我正在尝试使用 UITableview，但不确定从哪里开始。

UIKit Dynamics 在处理示例案例时非常有用。但是当涉及到真正的任务时，你会看到它是多么原始和受限。一个大问题是覆盖UIDynamicItemBehavior（实际上是属性，而不是行为）。你不能只在不同的行为中使用不同的物理特性。另一种情况是实现类似 UIScrollView 的橡胶边界——它非常复杂。我可以写更多，但评论太短了。

请添加完整代码。您的代码描述了如何创建 UIDynamicAnimator 和与之关联的对象，但没有回答如何使用它们

【参考方案3】：

这是我创建的一个演示项目，旨在帮助您获得恰到好处的动画。享受！

SpringDampingDemo

【讨论】：

为那个演示项目干杯，伙计。确实有助于弄清楚这些值，因为它们非常迟钝。我希望苹果能让它们更清楚

【参考方案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) 
    ];

【讨论】：

代码中没有解释，也没有注释。这没有帮助