训练营 - 使用UIView模拟霓虹灯效果

霓虹灯

1 -代码示例：可开启、终止霓虹灯闪动；可控制霓虹灯闪动方向

① 方式一：循环遍历视图

#import "ViewController.h"
#define W_Main  [UIScreen mainScreen].bounds.size.width
@interface ViewController (){
    NSTimer *_testTimer;
}

@end

@implementation ViewController

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

    // 开启
    UIButton *swBT = [UIButton buttonWithType:UIButtonTypeCustom];
    swBT.backgroundColor = [UIColor blackColor];
    swBT.frame = CGRectMake(100, 480, W_Main-100*2, 50);
    [swBT setTitle:@"Start" forState:UIControlStateNormal];
    [swBT addTarget:self action:@selector(startRuning:) forControlEvents:UIControlEventTouchUpInside];
    swBT.layer.cornerRadius = 25;
    swBT.tag = 199;
    [self.view addSubview:swBT];

    // 停止
    UIButton *stBT = [UIButton buttonWithType:UIButtonTypeCustom];
    stBT.backgroundColor = [UIColor redColor];
    stBT.frame = CGRectMake(135, 580, W_Main - 270, 50);
    [stBT setTitle:@"Stop" forState:UIControlStateNormal];
    [stBT addTarget:self action:@selector(stopRuning:) forControlEvents:UIControlEventTouchUpInside];
    stBT.layer.cornerRadius = 25;
    [self.view addSubview:stBT];

    // 颜色
    NSArray *array = [NSArray arrayWithObjects:
                      [UIColor darkGrayColor],
                      [UIColor yellowColor],
                      [UIColor redColor],
                      [UIColor greenColor],
                      [UIColor purpleColor],
                      [UIColor cyanColor],
                      [UIColor blueColor], nil];

    // 子视图
    for (int i = 0; i < array.count; i++) {
        UIView *view_i = [[UIView alloc] initWithFrame:CGRectMake(20 + 20*i, 140 + 20*i, W_Main-20*2 - 40*i, 280 - 40*i)];
        view_i.layer.cornerRadius = 10;
        view_i.backgroundColor = array[i];// 颜色
        view_i.tag = 101 + i; // tag 值
        [self.view addSubview:view_i];
    }
}

// 停止
-(void)stopRuning:(UIButton*)bt{

    if (_testTimer) {
        [_testTimer invalidate];
        _testTimer = nil;

        UIButton *statusBT = (UIButton*)[self.view viewWithTag:199];
        [statusBT setTitle:@"Start" forState:UIControlStateNormal];
    }

}

// 开启
- (void)startRuning:(UIButton*)bt{

    if ([bt.titleLabel.text isEqualToString:@"Start"]) {

        if (!_testTimer) {
            _testTimer =  [NSTimer scheduledTimerWithTimeInterval:.8 target:self selector:@selector(runing01) userInfo:self.view repeats:YES];
            [bt setTitle:@"由内向外" forState:UIControlStateNormal];

        }

    }else if ([bt.titleLabel.text isEqualToString:@"由内向外"]){

        if (_testTimer) {
            [_testTimer invalidate];
            _testTimer = nil;
            _testTimer =  [NSTimer scheduledTimerWithTimeInterval:.8 target:self selector:@selector(runing02) userInfo:self.view repeats:YES];
            [bt setTitle:@"由外向内" forState:UIControlStateNormal];
        }

    }else if([bt.titleLabel.text isEqualToString:@"由外向内"]){

        if (_testTimer) {
            [_testTimer invalidate];
            _testTimer = nil;
            _testTimer =  [NSTimer scheduledTimerWithTimeInterval:.5 target:self selector:@selector(runing01) userInfo:self.view repeats:YES];
            [bt setTitle:@"由内向外" forState:UIControlStateNormal];
        }
    }else{
        // nothing todo.........
    }

}

// 由内向外
- (void)runing01{

    // 搞一个中间变量
    UIColor *changeColor = [self.view viewWithTag:101].backgroundColor;
    for (int i = 0; i < 6; i ++) {
        // 颜色替换
        [self.view viewWithTag:101 + i].backgroundColor = [self.view viewWithTag:101 + i +1].backgroundColor;
        if (i == 5) {
            [self.view viewWithTag:107].backgroundColor = changeColor;
        }
    }
}

// 由外向内
- (void)runing02{

    // 同样搞一个中间变量
    UIColor *changeColor = [self.view viewWithTag:107].backgroundColor;
    for (int i = 6;i > 0; i --) {
        // 颜色的替换
        [self.view viewWithTag:i+101].backgroundColor = [self.view viewWithTag: i+100].backgroundColor;
        if (i ==1 ) {
            [self.view viewWithTag:101].backgroundColor = changeColor;
        }
    }

}

@end

运行效果

② 方式二：手动布局视图（加深理解其实现原理）

#import "ViewController.h"
#define W_Main  [UIScreen mainScreen].bounds.size.width
@interface ViewController (){
    UIView *aView;
    UIView *bView;
    UIView *cView;
    UIView *dView;
    UIView *eView;
}
@end

@implementation ViewController

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

    // 间隔 20
    int space = 20;

    aView = [[UIView alloc] initWithFrame:CGRectMake(70, 60,W_Main-140, 280)];
    aView.backgroundColor = [UIColor redColor];
    [self.view addSubview:aView];
    aView.tag = 101;

    bView = [[UIView alloc] initWithFrame:CGRectMake(70+space, 80, W_Main-180,240)];
    bView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:bView];
    bView.tag = 102;

    cView = [[UIView alloc] initWithFrame:CGRectMake(70+space*2, 100, W_Main-220, 200)];
    cView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:cView];
    cView.tag = 103;

    dView = [[UIView alloc] initWithFrame:CGRectMake(70+space*3, 120, W_Main-260, 160)];
    dView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:dView];
    dView.tag = 104;

    eView = [[UIView alloc] initWithFrame:CGRectMake(70+space*4, 140, W_Main-300, 120)];
    eView.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:eView];
    eView.tag =105;

    // NSTimer
    [NSTimer scheduledTimerWithTimeInterval:.5 target:self selector:@selector(exchangeViewColor) userInfo:nil repeats:YES];
}

- (void)exchangeViewColor{

//    // 由内向外
//    UIColor *changeColor11 = aView.backgroundColor;
//    aView.backgroundColor = bView.backgroundColor;
//    bView.backgroundColor = cView.backgroundColor;
//    cView.backgroundColor = dView.backgroundColor;
//    dView.backgroundColor = eView.backgroundColor;
//    eView.backgroundColor = changeColor11;

    // 由外向内
    UIColor *changeColor22 = eView.backgroundColor;
    eView.backgroundColor = dView.backgroundColor;
    dView.backgroundColor = cView.backgroundColor;
    cView.backgroundColor = bView.backgroundColor;
    bView.backgroundColor = aView.backgroundColor;
    aView.backgroundColor = changeColor22;

}

@end

运行效果