IOS--簡易的窗簾動畫

IOS–簡易的窗簾動畫

使用原理 UIview的動畫控制窗簾的高度


#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSInteger, ToastAnimtype) {
    DONE,
    RELOCATION,   
    PAWER_SAVE,
};



@interface WinAnimViewController : UIViewController

@property(strong,nonatomic) UIView* topNavBgView;
@property(strong,nonatomic) UILabel* toastTxtView;
@property(strong,nonatomic) UIView* maskView;
@property(strong,nonatomic) UIButton* startAnimBtn;

@end

NS_ASSUME_NONNULL_END



#import "WinAnimViewController.h"
#import "UIColor+Hex.h"

@interface WinAnimViewController ()
@end

@implementation WinAnimViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self initView];
    
}


-(void) initView{
    
    self.topNavBgView = [[UIView alloc] initWithFrame:CGRectMake(30, 100, 300, 80)];
    self.topNavBgView.backgroundColor = [UIColor grayColor];
    
    UIImageView* close = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"close"]];
    close.contentMode = UIViewContentModeScaleAspectFit;
    close.frame = CGRectMake(17, (80 - 16) / 2, 16, 16);
    close.userInteractionEnabled = true;
    [self.topNavBgView addSubview:close];
    
    UIView* leftLineView = [[UIView alloc] initWithFrame:CGRectMake(49, (80-16) / 2, 1, 16)];
    leftLineView.backgroundColor = [UIColor whiteColor];
    [self.topNavBgView addSubview:leftLineView];
    
    
    UIImageView* location = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"location"]];
    location.contentMode = UIViewContentModeScaleAspectFit;
    location.frame = CGRectMake((300 - 16 -17), (80 - 16) / 2, 16, 16);
    location.userInteractionEnabled = true;
    [self.topNavBgView addSubview:location];
    
    UIView* rightLineView = [[UIView alloc] initWithFrame:CGRectMake(location.frame.origin.x - 16, (80-16) / 2, 1, 16)];
    rightLineView.backgroundColor = [UIColor whiteColor];
    [self.topNavBgView addSubview:rightLineView];
    
    
    [self setConner:self.topNavBgView connerRadius:CGSizeMake(6, 6)
     byRoundingCorners:
     UIRectCornerTopRight |
     UIRectCornerTopLeft |
     UIRectCornerBottomLeft | 
     UIRectCornerBottomRight];
    

    
    
    [self.view addSubview:self.topNavBgView];

    self.toastTxtView = [[UILabel alloc] initWithFrame:CGRectMake(30, 180, 300, 0)];
    self.toastTxtView.text = @"Done";
    self.toastTxtView.textAlignment = NSTextAlignmentCenter;
    self.toastTxtView.textColor = [UIColor whiteColor];
    self.toastTxtView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.toastTxtView];



    self.startAnimBtn = [[UIButton alloc] initWithFrame:CGRectMake(50, 300, 100, 50)];
    self.startAnimBtn.backgroundColor = [UIColor greenColor];
    [self.startAnimBtn setTitle:@"動畫開始" forState:UIControlStateNormal];
    [self.startAnimBtn addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.startAnimBtn];
    
}

-(void) onClick:(UIButton*) button{
    
    [self startAnim:DONE];
}

-(void) startAnim:(ToastAnimtype) type{
    switch (type) {
        case DONE:{
            //設置背景圓角
            [self setConner:self.topNavBgView connerRadius:CGSizeMake(6, 6)
               byRoundingCorners:UIRectCornerTopRight | UIRectCornerTopLeft];
            
            self.toastTxtView.backgroundColor = [UIColor colorWithHexString:@"#00BA83"];
            
            [UIView animateWithDuration:0.8
                             animations:^{
                                    self.toastTxtView.frame = CGRectMake(30, 180, 300, 60);
                //設置toast done文本的圓角方式
                [self setConner:self.toastTxtView connerRadius:CGSizeMake(6, 6)
                              byRoundingCorners:UIRectCornerBottomRight | UIRectCornerBottomLeft];
                
            } completion:^(BOOL finished){
                
                
                [UIView animateWithDuration:0.8
                                      delay:3
                                    options:UIViewAnimationOptionCurveLinear
                                 animations:^{
                    self.toastTxtView.frame = CGRectMake(30, 180, 300, 0);
                    
                    
                } completion:^(BOOL finished){
                    [self setConner:self.topNavBgView connerRadius:CGSizeMake(6, 6)
                                  byRoundingCorners:UIRectCornerTopRight | UIRectCornerTopLeft
                     |UIRectCornerBottomRight | UIRectCornerBottomLeft];
                    
                }];
                                
            }];
        }
            
            break;
            
        case RELOCATION:
            break;
            
        case PAWER_SAVE:
            break;
            
        default:
            break;
    }
}

-(void) setConner:(UIView*) rootView connerRadius:(CGSize)cornerRadii byRoundingCorners:(UIRectCorner)corners{
    
    if (rootView) {
        UIBezierPath *cornerRadiusPath = [UIBezierPath bezierPathWithRoundedRect:rootView.bounds byRoundingCorners:corners cornerRadii:cornerRadii];
        CAShapeLayer *cornerRadiusLayer = [ [CAShapeLayer alloc ] init];
        cornerRadiusLayer.frame = rootView.bounds;
        cornerRadiusLayer.path = cornerRadiusPath.CGPath;
        rootView.layer.mask = cornerRadiusLayer;
    }
}



@end

效果如下

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章