Как создать анимацию UIView bounce?

У меня есть следующее CAT-переход для UIView, называемый 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"];

Как мне сделать так, чтобы он отскакивал один раз после того, как он опускался, а затем все еще остается? Он должен по-прежнему вводить экран сверху, а затем отскакивать, когда он падает.

Любая помощь будет очень признательна, спасибо!

Ответ 1

С iOS7 и UIKit Dynamics больше не нужно использовать анимации CAKeyframeAnimations или UIView!

Посмотрите приложение 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];

И вот результаты

Square bounce

UIKit Dynamics - действительно мощное и удобное дополнение к iOS7, и вы можете получить от него отличный внешний интерфейс.

Другие примеры:

Button bounceSlide bounceSpringy collectionWWDC sprint collection

Шаги по реализации динамики UIKit всегда одинаковы:

  • Создайте UIDynamicAnimator и сохраните его в сильном свойстве
  • Создайте один или несколько UIDynamicBehaviors. Каждое поведение должно иметь один или несколько элементов, как правило, для анимации.
  • Убедитесь, что начальное состояние элементов, используемых в UIDynamicBehaviors, является допустимым состоянием в симуляции UIDynamicAnimator.

Ответ 2

Более простая альтернатива UIDynamicAnimator в iOS 7 - это Spring Анимация (новая и мощная анимация блока UIView), которая может дать вам хороший эффект подпрыгивания с затуханием и скоростью: Цель 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
        })

usingSpringWithDamping 0.0 == очень бодрый. 1.0 обеспечивает плавное замедление без превышения.

initialSpringVelocity, грубо говоря, "желаемое расстояние, деленное на желаемые секунды". 1.0 соответствует общему расстоянию анимации, пройденному за одну секунду. Например, общее расстояние анимации составляет 200 точек, и вы хотите, чтобы начало анимации соответствовало скорости просмотра 100 пт/с, используйте значение 0,5.

Более подробное руководство и пример приложения можно найти в этом tutorial. Надеюсь, что это кому-то полезно.

Ответ 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) {
    }];
}
}