iOS弹跳动画

前言

已经受够了frame适配的繁琐，开始使用masonry自适应布局（我的喜爱纯代码布局）。但最近学习的效率有点低，学习的越多就发现不懂得就越多；不免有一点失落，遇到的问题不能获得解决心情确实比较low。可是学习的道路仍是得继续，坑越多说明学习越有必要。今天闲着无聊点点别人写的app，看到一个弹出框并带有一个动画效果，想一想本身也实现一下这个效果，弹出alert的实例。

 

实例代码

#import "AlertDialog.h"
#import "Masonry.h"

#define kScreenWidth CGRectGetWidth([UIScreen mainScreen].bounds)
#define kScrennHeight CGRectGetHeight([UIScreen mainScreen].bounds)
#define kAlertDialogWidth 300.0f;
#define kAlertDialogHeight 200.0f

@interface AlertDialog ()

@property (nonatomic,copy) NSString *title;
@property (nonatomic,copy) NSString *content;

@property (nonatomic,strong) UIView *mainBG;
@property (nonatomic,strong) UIView *alertDialog;

@property (nonatomic,strong) UIButton *leftButton;
@property (nonatomic,strong) UIButton *rightButton;

@end
@implementation AlertDialog

- (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title content:(NSString *)content
{
    self = [super initWithFrame:frame];
    if (self){
        
        self.title = title;
        self.content = content;
        
        [self createMain];
        
        [self createAlertDialog];
        
    }
    
    return self;
}

- (void)createMain
{
    self.mainBG = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScrennHeight)];
    self.mainBG.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5f];
    [self addSubview:self.mainBG];
}

- (void)createAlertDialog
{
    self.alertDialog = [[UIView alloc] init];
    self.alertDialog.backgroundColor = [UIColor whiteColor];
    [self.mainBG addSubview:self.alertDialog];
    [self.alertDialog mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(300.0f);
        make.width.mas_equalTo(@250.0f);
        make.center.mas_equalTo(self.mainBG);
    }];
    
    [self createButton];
    
    UILabel *labelTitle = [[UILabel alloc] init];
    labelTitle.preferredMaxLayoutWidth = kScreenWidth - 30;
    labelTitle.backgroundColor = [UIColor colorWithRed:223.0f/255 green:223.0f/255 blue:223.0f/255 alpha:1.0f];
    labelTitle.text = self.title;
    labelTitle.textAlignment = NSTextAlignmentCenter;
    labelTitle.textColor = [UIColor blackColor];
    [self.alertDialog addSubview:labelTitle];
    
    [labelTitle mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.left.and.right.equalTo(self.alertDialog);
        make.height.mas_equalTo(@40);
    }];
    
    UILabel *labelContent = [[UILabel alloc] init];
    labelContent.preferredMaxLayoutWidth = kScreenWidth - 30;
    labelContent.text = self.content;
    labelContent.numberOfLines = 0;
    labelContent.textAlignment = NSTextAlignmentCenter;
    labelContent.textColor = [UIColor colorWithRed:0 green:160.0f/255 blue:223.0/255 alpha:1.0f];
    [self.alertDialog addSubview:labelContent];
    
    [labelContent mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(labelTitle.mas_bottom).offset(20);
        make.left.equalTo(self.alertDialog).offset(10);
        make.right.equalTo(self.alertDialog).offset(-10);
        make.bottom.equalTo(self.leftButton.mas_top).offset(-20).priority(749);
    }];
    
    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];
    [self layoutIfNeeded];
    
    UIBezierPath *bezier = [UIBezierPath bezierPathWithRoundedRect:self.alertDialog.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(5, 5)];
    CAShapeLayer *shape = [[CAShapeLayer alloc] init];
    shape.frame = self.alertDialog.bounds;
    shape.path = bezier.CGPath;
    self.alertDialog.layer.mask = shape;
}

- (void)createButton
{
    self.leftButton = [[UIButton alloc] init];
    [self.leftButton setTitle:@"取消" forState:UIControlStateNormal];
    [self.leftButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.leftButton setBackgroundColor:[UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0]];
    [self.alertDialog addSubview:self.leftButton];
    
    self.rightButton = [[UIButton alloc] init];
    [self.rightButton setTitle:@"肯定" forState:UIControlStateNormal];
    [self.rightButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.rightButton setBackgroundColor:[UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0]];
    [self.alertDialog addSubview:self.rightButton];
    
    [@[self.leftButton,self.rightButton] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:15 leadSpacing:10 tailSpacing:10];
    [@[self.leftButton,self.rightButton] mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(self.alertDialog.mas_bottom).offset(-10);
        make.height.mas_equalTo(@30);
    }];
}

- (void)showAlertDialog
{
    [[UIApplication sharedApplication].keyWindow addSubview:self];
    [self alertByAnima];
}

- (void)alertByAnima
{
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    keyAnima.duration = 0.4f;
    keyAnima.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01f, 0.01f, 1.0f)],
                        [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.0f)],
                        [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9f, 0.9f, 1.0f)],
                        [NSValue valueWithCATransform3D:CATransform3DIdentity]
                        ];
    
    keyAnima.keyTimes = @[@0.2f, @0.5f, @0.75f, @1.0f];
    keyAnima.timingFunctions = @[
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
                                 ];
    
    [self.alertDialog.layer addAnimation:keyAnima forKey:nil];
}

- (void)hideAlertDialog
{
    [UIView animateWithDuration:0.4 animations:^{
        self.alertDialog.alpha = 0;
    }];
    
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    keyAnima.duration = 0.4f;
    keyAnima.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.0f)],
                        [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0f, 1.0f, 1.0f)],
                        [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0f, 0.0f, 0.0f)]
                        ];
    
    keyAnima.keyTimes = @[@0.2f, @0.5f, @0.75f];
    keyAnima.timingFunctions = @[
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
                                 ];
    keyAnima.delegate = self;
    [self.alertDialog.layer addAnimation:keyAnima forKey:nil];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self hideAlertDialog];
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    [self removeFromSuperview];
}

 

总结

这个只是一个简单的弹出框，相似系统自带的alert框；控件中包含Masonry的基本布局使用以及关键帧动画的使用。这个是源于本身看的其余app的效果所实现的，固然呢还能够把背景蒙版视图改为渐变视图。但愿各位大神能指点一二；学习还在继续。。