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的效果所實現的，固然呢還能夠把背景蒙版視圖改爲漸變視圖。但願各位大神能指點一二；學習還在繼續。。