ios - 模仿 UIAlertController 展示动画

Question

所以我创建了自己的自定义 UIView，它看起来像一个警报，现在我想添加显示和隐藏动画。

我想为 AlertController 模仿 Apple 的默认动画。解雇是一个简单的淡入淡出动画，但是我不确定如何表达显示动画，它几乎就像是淡入淡出和收缩混合。

无论如何，如果有人知道如何重新创建它，我将非常感激。

这是我的最终结果:

这个 gif 没有表现出来，但它与 UIAlertControllers 动画非常相似。

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

Answer 1

尝试使用核心动画代替 UIView 动画。

我创建了一个带有灰色背景的简单 UIView，并添加了下面的动画:

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

当你想添加动画时，在将 View 添加为 subview 后立即调用:您需要子类化 UIView 并将代码放在那里。

稍后你可以调用:

[_yourView addAlertPopUpAnimationWithCompletion:^(BOOL finished) {

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

动画看起来像这样: