Some silly animation fun

I’ve been having a blast making this iOS app. I’ve been playing around with a ton of animations and I wanted to share one in particular that didn’t make the final version of the app but was a fun bit of code anyways.

Here is what it looks like (really hope this works):

logo

So there are a few things going on here.

First there is a long press on the green circle to record. And upon the release, the recording session ends and displays a few buttons to click on. There are some cool pop noises that unfortunately can’t be heard in a gif. Y U NO SOUND GIF!?

So the code is the following:

[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:.15 initialSpringVelocity:.08 options:UIViewAnimationOptionCurveLinear animations:^{
      button.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
      self.containerView.alpha = 0;
      self.containerView.hidden = NO;
      button.backgroundColor = [UIColor customGreenColor];
      self.recordAgainButton.hidden = NO;
      self.recordAgainButton.alpha = 0;
      [self zeroState:ButtonStateZero];
      self.recordCornerButton.hidden = YES;
      self.playCornerButton.hidden = YES;
      [UIView animateWithDuration:0 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
            self.containerView.alpha = 1;
            [self.containerView animateLayoutButtons];
            self.recordAgainButton.alpha = 1;
      } completion:^(BOOL finished) {
            [self showBottomButtons];
      }];
  }];

}];

So this is basically just the end of the animation you have just witnessed. It’s animation blocks inside of animation blocks. The thing I want to highlight is [self.containerView animateLayoutButtons];

Here is the public method I am calling within the UIView subclass of containerView:

- (void)animateLayoutButtons {
    [UIView animateWithDuration:.1 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        self.focusButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
        self.presenceButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:.1 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            self.focusButton.transform = CGAffineTransformIdentity;
            self.presenceButton.transform = CGAffineTransformIdentity;
            self.courageButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
            self.funButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:.1 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
                self.funButton.transform = CGAffineTransformIdentity;
                self.courageButton.transform = CGAffineTransformIdentity;
                self.ambitionButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
                self.imaginationButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
            } completion:^(BOOL finished) {
                [UIView animateWithDuration:.1 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
                    self.ambitionButton.transform = CGAffineTransformIdentity;
                    self.imaginationButton.transform = CGAffineTransformIdentity;
                } completion:nil];
            }];
        }];
    }];
}

These simple lines of code give it the fun popping effect as the 6 buttons get put into place. All I’m doing is changing the scale of each button to 1.1 and setting it back to its identity while another button is being scaled to 1.1.

I wish it were a part of my app, but I realized that it had no place in my app for now. Tune in for AVAudioRecorder and AVAudioPlayer next!