iOS动画之弹簧效果

第一次写文章,希望大家多多支持。

iOS动画在iOS开发中是必不可少的部分,并且现在市场上大部分APP都有动画的渗入,一款优秀的APP,其动画效果一定很棒,比如新浪微博的发布功能,各个控件就像小弹簧一样在上下跳动,而今天我要分享的动画就是类似于新浪微博发布控件的动画,其实就是利用了uiview的一个动画效果,+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);就是uiview的这个方法,直接上核心代码:

在xcode中创建一个继承uiview的OccasionView类,在OccasionView.h文件写如下代码:

typedef void(^OccasionBlock)(NSString *occasionStr);//定义一个block,用来给需要的控制器传递值
@interface OccasionView : UIView
@property (nonatomic, copy)OccasionBlock block;
@property (nonatomic, strong)UIVisualEffectView *backView;//给弹出的视图添加毛玻璃效果

OccasionView.m中写如下代码:

//
//  OccasionView.m
//  弹簧动画
//
//  Created by ZYXun on 16/8/22.
//  Copyright © 2016年 ZYX. All rights reserved.
//

#import "OccasionView.h"
#import "UIView+YX.h"
#import "CommonDefine.h"
@implementation OccasionView

- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self addSubview:self.backView];
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHidden:)];
        [self addGestureRecognizer:tap];
    }
    return self;
}

#pragma mark - private
//隐藏
- (void)tapHidden:(UITapGestureRecognizer *)tap{
    
    NSMutableArray *tmpArr = [NSMutableArray array];
    for (UIView *subview in self.backView.subviews) {
        if ([subview isKindOfClass:[UIButton class]]) {
            [tmpArr addObject:subview];
        }
    }
    
    //数组进行反序,因为按钮消失的顺序由后向前
    NSArray *reverseArr = [[tmpArr reverseObjectEnumerator] allObjects];
    
    for (int i=0; i         UIButton *button =  (UIButton *)reverseArr[i];
        [UIView animateWithDuration:0.3 delay:0.05 * i  usingSpringWithDamping:0.7 initialSpringVelocity:12 options:UIViewAnimationOptionCurveLinear animations:^{
            button.y = SCREEN_HEIGHT;
        } completion:^(BOOL finished) {
            [button removeFromSuperview];
            [UIView animateWithDuration:0.1 animations:^{
                self.alpha = 0;
            } completion:^(BOOL finished) {
                [self removeFromSuperview];
            }];
        }];
    }
}

- (void)createUI:(CGRect)frame{
    CGFloat width = 80;
    CGFloat height = 80;
    //    CGFloat paddings = (frame.size.width-3*width)/4;
    //    CGFloat upPaddings = upPadding;
    NSArray *titleArr = @[@"日常",@"工作",@"聚会",@"约会",@"假日",@"正式"];
    
    NSMutableArray *tmpArr = [NSMutableArray array];
    
    for (int i = 0; i         UIButton *tagBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        //        tagBtn.frame = CGRectMake((padding+width)*(i%3)+padding, upPadding+(upPadding+height)*(i/3), width, height);
        tagBtn.frame = CGRectMake((padding+width)*(i%3)+padding, SCREEN_HEIGHT, width, height);
        tagBtn.tag = i+1;
        [tagBtn setTitle:titleArr[i] forState:UIControlStateNormal];
        [tagBtn setTitleColor:MAIN_COLOR forState:UIControlStateNormal];
        tagBtn.layer.cornerRadius = width/2;
        tagBtn.clipsToBounds = YES;
        tagBtn.layer.masksToBounds = YES;
        tagBtn.titleLabel.font = TEXT_FONT(15);
        tagBtn.layer.borderWidth = 1;
        tagBtn.layer.borderColor = MAIN_COLOR.CGColor;
        [tagBtn addTarget:self action:@selector(tagBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        
        [tmpArr addObject:tagBtn];
        
        [self.backView addSubview:tagBtn];
        
        
    }
    //
    for (int j = 0; j         UIButton *button = (UIButton *)tmpArr[j];
        CGFloat buttonY = upPadding + (upPadding) * (j/3);
        [UIView animateWithDuration:0.3 delay:0.05*j usingSpringWithDamping:0.7 initialSpringVelocity:10 options:UIViewAnimationOptionCurveLinear animations:^{
            button.y = buttonY;
        } completion:^(BOOL finished) {
            
        }];
    }
    //
    
}


- (void)tagBtnClick:(UIButton *)btn{
    if (self.block) {
        self.block(btn.titleLabel.text);//进行传值操作
    }
    [self removeFromSuperview];
}

#pragma mark - 懒加载
//毛玻璃效果
- (UIVisualEffectView *)backView{
    if (!_backView) {
        UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        _backView = [[UIVisualEffectView alloc] initWithEffect:blur];
        //        _backView.frame = CGRectMake(20, SCREEN_HEIGHT/2-100, (SCREEN_WIDTH-40), 200);
        _backView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        [self createUI:_backView.frame];
    }
    return _backView;
}


@end

在所需要用这个弹出的动画视图的控制器中写如下操作:

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.occasionSelect];
}

#pragma mark - UITextFieldDelegate
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
    //弹框
    
    OccasionView *occasion = [[OccasionView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    occasion.backgroundColor = [UIColor clearColor];
    [occasion setBlock:^(NSString *string){
        textField.text = string;
    }];
    [self.view addSubview:occasion];
    return NO;
}

#pragma mark - 懒加载

- (UITextField *)occasionSelect{
    if (!_occasionSelect) {
        _occasionSelect = [[UITextField alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2-50, SCREEN_HEIGHT/2, 100, 30)];
        _occasionSelect.delegate = self;
        _occasionSelect.text = @"日常";//给一个默认值
        _occasionSelect.textAlignment = NSTextAlignmentCenter;
        _occasionSelect.font = TEXT_FONT(15);
        _occasionSelect.borderStyle = UITextBorderStyleBezel;
    }
    return _occasionSelect;
}



你可能感兴趣的:(iOS动画之弹簧效果)