iosmask_iOS蒙板:mask初识

一、初识

蒙在上面的板子

一头蒙(懵)逼

只是mask的一个应用，还未深入研究(原文作者的那句话：先看脸，再看内涵。不过我还没看内涵..)

二、预览

预览.gif

三、原材料

进度条所需原材料：

材料一：创建灰色的进度条背景，CALayer实现；

材料二：创建渐变的进度条背景覆盖在灰色背景上面，CAGradientLayer实现；

材料三：创建CALayer蒙版对象，作为渐变进度条的蒙版，设置蒙版的borderWidth属性，其值最小为进度条宽度的一半；

实现文字渐变所需原材料：

材料一：在进度条上方创建一个同等长度的渐变背景；

1.png

材料二：创建一个UIButton对象作为材料一的蒙版，未设置button的frame时“材料一”会凭空消失，试了用UILabel对象来做蒙版，但达不到效果；

四、动起来

包含三组动画：进度条动画、文字位置动画、文字改变动画

五、代码

控制器.m代码

#import "MaskVC.h"

#import "GradientProcessView.h"

#define SCREEN_WIDTH self.view.frame.size.width

#define kColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1]

@interface MaskVC ()

@property (nonatomic, strong) UITextField *valueTF;

@property (nonatomic, strong) GradientProcessView *mGradientView;

@end

@implementation MaskVC

- (void)viewDidLoad {

[super viewDidLoad];

self.view.backgroundColor = [UIColor whiteColor];

_mGradientView = [[GradientProcessView alloc] initWithFrame:CGRectMake(20, 100, SCREEN_WIDTH-40, 50)];

[self.view addSubview:_mGradientView];

_valueTF = [[UITextField alloc] initWithFrame:CGRectMake(20, 200, 200, 30)];

_valueTF.placeholder = @"输入1-100之间的整数";

_valueTF.keyboardType = UIKeyboardTypeNumberPad;

_valueTF.borderStyle = UITextBorderStyleBezel;

[self.view addSubview:_valueTF];

UIButton *stareButton = [UIButton buttonWi