如何创建UIView跳动动画?


92

对于名为的UIView finalScoreView,我具有以下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"];

我如何使它下降后反弹一次,然后保持静止?它仍然应该从顶部进入屏幕,但是当它下来时会反弹。

任何帮助将不胜感激,谢谢!


3
您是否定位到iOS7及更高版本?如果是这样,您可以利用UIKit Dynamics
WDUK 2014年

Answers:


144

随着iOS7和UIKit动力,不再有任何需要使用CAKeyframeAnimationsUIView动画!

看看Apple的UIKit Dynamics Catalog应用程序。或者,Teehanlax有一个清晰,简明教程在github上完整的项目。如果您想了解有关动力学的详细知识的详细教程,Ray Winderlich教程非常有用。与往常一样,Apple文档是一个很好的第一站,因此请查阅文档中的UIDynamicAnimator类参考

这是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。

其他例子:

按钮弹跳 幻灯片弹跳 弹性系列 WWDC冲刺系列

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

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

1
嗨,迈克尔,非常感谢您的帮助!这绝对看起来非常容易做到!我尝试了它,当它到达视图的底部时它可以工作,但是它不能与另一个视图一起使用-stackoverflow.com/questions/21895674/…-如果您能帮助我,我会很高兴!:)谢谢
user3127576

2
一个宏伟的教程,但是您只需要使用SpringWithDamping的一行代码就可以弹跳!
Fattie

2
您是否可以共享上述Uitableview弹跳动画的代码示例。我正在尝试使用UITableview,但不确定从哪里开始。
Dinesh

1
当处理示例案例时,UIKit Dynamics非常有用。但是,当涉及到实际任务时,您会看到它是多么原始和受限制。一个主要的问题是重写UIDynamicItemBehavior(实际上是属性,而不是行为)。您不能只是在不同的行为中使用不同的物理属性。另一种情况是实现类似于UIScrollView的橡胶边界-这非常复杂。我可以写更多,但评论太短。
凯琳

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

261

UIDynamicAnimatoriOS 7中一个更简单的替代方法是Spring Animation(一种新的强大的UIView块动画),它可以为您提供具有阻尼和速度的漂亮弹跳效果: Objective 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
        })

迅捷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的值。

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


2
这是我创建的一个演示项目,可帮助您正确制作动画。请享用!github.com/jstnheo/SpringDampingDemo
jstn 2015年

为这个演示项目欢呼,队友。由于它们很钝,因此确实有助于弄清这些值。我希望苹果公司能使它们更清晰
kakubei

32

这是我创建的一个演示项目,可帮助您正确制作动画。请享用!

SpringDampingDemo

在此处输入图片说明


为这个演示项目欢呼,队友。由于它们很钝,因此确实有助于弄清这些值。我希望苹果公司能使它们更清晰
kakubei

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

1
代码中没有解释,也没有注释。这没有帮助
Lorenzo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.