Mimic UIAlertController show animation

Question

So I created my own custom UIView that looks like an alert, and now I want to add show and hide animations.

I want to mimic Apples default animations for the AlertController. The dismissal is an simple fade animation, however I'm not sure how to articulate the show animation, it's almost like a fade in mixed with a shrink.

Anyways if anybody know how to recreate it I'd really appreciate it.

This is my final result:

This gif is doing it no justice but it's very similar to UIAlertControllers animations.

-(void)alerterShowAnimation {
    self.alpha = 0;
    self.hidden = NO;
    self.transform = CGAffineTransformMakeScale(1.2, 1.2);
    [UIView animateWithDuration:0.3 animations:^{
        self.alpha = 1.0f;
        self.containerView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.5];
    }];
    [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        self.transform = CGAffineTransformIdentity;
    } completion:nil];
}

What have you tried so far? Make an attempt and come back here with specific questions about problems you encounter along the way. "Write my code for me" is not an acceptable question. — Stonz2

Teja Nandamuri Teja Nandamuri · Accepted Answer · 2015-12-09T16:20:26

Instead of UIView animation, try using the core animation.

I have created a simple UIView with grey background, and added the animation below:

- (void)addAlertPopUpAnimationWithBeginTime:(CFTimeInterval)beginTime andFillMode:(NSString *)fillMode andRemoveOnCompletion:(BOOL)removedOnCompletion completion:(void (^)(BOOL finished))completionBlock
{
    CAMediaTimingFunction *linearTiming = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    if (completionBlock)
    {
        CABasicAnimation *representativeAnimation = [CABasicAnimation animationWithKeyPath:@"not.a.real.key"];
        representativeAnimation.duration = 0.200;
        representativeAnimation.delegate = self;
        [self.layer addAnimation:representativeAnimation forKey:@"AlertPopUp"];

    }

    CAKeyframeAnimation *proPicOpacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    proPicOpacityAnimation.duration = 0.200;
    proPicOpacityAnimation.values = @[@(0.000), @(0.525), @(1.000)];
    proPicOpacityAnimation.keyTimes = @[@(0.000), @(0.500), @(1.000)];
    proPicOpacityAnimation.timingFunctions = @[linearTiming, linearTiming];
    proPicOpacityAnimation.beginTime = beginTime;
    proPicOpacityAnimation.fillMode = fillMode;
    proPicOpacityAnimation.removedOnCompletion = removedOnCompletion;
    [[self layer] addAnimation:proPicOpacityAnimation forKey:@"alertPopUp_Opacity"];

    CAKeyframeAnimation *proPicScaleXAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
    proPicScaleXAnimation.duration = 0.200;
    proPicScaleXAnimation.values = @[@(0.304), @(0.345), @(0.300)];
    proPicScaleXAnimation.keyTimes = @[@(0.000), @(0.500), @(1.000)];
    proPicScaleXAnimation.timingFunctions = @[linearTiming, linearTiming];
    proPicScaleXAnimation.beginTime = beginTime;
    proPicScaleXAnimation.fillMode = fillMode;
    proPicScaleXAnimation.removedOnCompletion = removedOnCompletion;
    [[self layer] addAnimation:proPicScaleXAnimation forKey:@"alertPopUp_ScaleX"];

    CAKeyframeAnimation *proPicScaleYAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
    proPicScaleYAnimation.duration = 0.200;
    proPicScaleYAnimation.values = @[@(0.381), @(0.435), @(0.389)];
    proPicScaleYAnimation.keyTimes = @[@(0.000), @(0.500), @(1.000)];
    proPicScaleYAnimation.timingFunctions = @[linearTiming, linearTiming];
    proPicScaleYAnimation.beginTime = beginTime;
    proPicScaleYAnimation.fillMode = fillMode;
    proPicScaleYAnimation.removedOnCompletion = removedOnCompletion;
    [[self layer] addAnimation:proPicScaleYAnimation forKey:@"alertPopUp_ScaleY"];

    CAKeyframeAnimation *proPicTranslationXAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];
    proPicTranslationXAnimation.duration = 0.200;
    proPicTranslationXAnimation.values = @[@(0.000), @(0.194), @(0.683)];
    proPicTranslationXAnimation.keyTimes = @[@(0.000), @(0.500), @(1.000)];
    proPicTranslationXAnimation.timingFunctions = @[linearTiming, linearTiming];
    proPicTranslationXAnimation.beginTime = beginTime;
    proPicTranslationXAnimation.fillMode = fillMode;
    proPicTranslationXAnimation.removedOnCompletion = removedOnCompletion;
    [[self layer] addAnimation:proPicTranslationXAnimation forKey:@"alertPopUp_TranslationX"];

    CAKeyframeAnimation *proPicTranslationYAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
    proPicTranslationYAnimation.duration = 0.200;
    proPicTranslationYAnimation.values = @[@(0.000), @(11.242), @(0.581)];
    proPicTranslationYAnimation.keyTimes = @[@(0.000), @(0.500), @(1.000)];
    proPicTranslationYAnimation.timingFunctions = @[linearTiming, linearTiming];
    proPicTranslationYAnimation.beginTime = beginTime;
    proPicTranslationYAnimation.fillMode = fillMode;
    proPicTranslationYAnimation.removedOnCompletion = removedOnCompletion;
    [[self layer] addAnimation:proPicTranslationYAnimation forKey:@"alertPopUp_TranslationY"];
}



- (void)addAlertPopUpAnimationWithCompletion:(void (^)(BOOL finished))completionBlock
{
    [self addAlertPopUpAnimationWithBeginTime:0 andFillMode:kCAFillModeBoth andRemoveOnCompletion:NO completion:completionBlock];
}

When you want to add animations, call right after you add your view as subview: You need to subclass the UIView and put the code in there.

Later you can call:

[_yourView addAlertPopUpAnimationWithCompletion:^(BOOL finished) {

    //do your stuff after animation is finished
}];

The animation looks like this:

Mimic UIAlertController show animation

1 Answers