第一个项目之六--手势和动画

前言

上篇是总算把地铁线给画出来了，虽然没什么美感。嘛，那些可以慢慢改的嘛。
这篇就来试着给地铁线加些炫酷到不行的功能（其实就是点击动画）。
<br />

iOS的事件

在iOS里面，动作事件有三类：
1.屏幕触摸事件（点击、长按、拖动等）
2.加速器动作事件（摇一摇、横向放置等）
3.远程控制事件（耳机按钮、外置手柄等）
所有继承了UIResponder的类都可以对事件进行处理。
这里只对屏幕触摸事件做一个实际应用测试，下面就复制一段对应事件方法：

Paste_Image.png

<br />

加上标签

因为打算对站点添加触摸动作，但是站点都是局部变量，也就是初始化完了之后，我就丢失了联系他们的办法了。那么，此时我们要做的，就是先给每个局部变量加上一个标记，然后再添加一个手势识别，这样我们就可以通过标记来响应触摸事件，来找到对应的站点了。
首先我要先加两个变量，这是为后面做动画的时候准备的：

@property (nonatomic, strong) NSMutableArray *array_label_station;
@property (nonatomic, strong) UIView *view_background_route;

然后先初始化一个单击手势，并将手势添加到站点上面，再设置一个标记：

UITapGestureRecognizer *gesture_tap_temp1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
lb_start.tag = 90000;
lb_start.userInteractionEnabled = YES;
[lb_start addGestureRecognizer:gesture_tap_temp1];

大概效果最后就是：

RouteViewGesture.gif

很渣的动画

手势动作已经做好了，是时候加一下很酷(zha)的动画效果了。
其实在AlertMessage里面就有用到动画，在这里也是在AlertMessage的动画基础上做一个改动而已。
首先，要先加一个变量，是用来判断动画是否已经执行了的。

@property (nonatomic, assign) BOOL isStationsPullAside;

首先对刚才的那个手势方法做个改动，那个showAlertMessage就扔掉了吧，没有用了。我们换一个炫酷很多的：

- (void)singleTapAction:(UITapGestureRecognizer *)sender{
    [self pullStationsAsideWithTag:sender.self.view.tag];
}

- (void)pullStationsAsideWithTag:(long)tag{
    float alpha_route = 0;
    float duration_route = 0.2f;
    if(self.isStationsPullAside){
        alpha_route = 1;
        duration_route = 0.4f;
    }
    else{
        alpha_route = 0;
        duration_route = 0.2f;
    }
    [UIView animateWithDuration:duration_route animations:^{
        [self.view_background_route setAlpha:alpha_route];
    }];
    
    for(UILabel *lb_temp in self.array_label_station){
        if(self.isStationsPullAside){
            [UIView animateWithDuration:0.25f animations:^{
                [lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
            }];
        }else{
            [UIView animateWithDuration:0.25f animations:^{
                [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
            }completion:^(BOOL finished){
                if(lb_temp.tag == tag){
                    [UIView animateWithDuration:0.15f animations:^{
                        [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 6) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
                    }];
                }
            }];
        }
    }
    self.isStationsPullAside = !self.isStationsPullAside;
}

这就完成了，先来看看效果，不要抱太多期望，渣到我自己都在偷笑！

RouteViewAnimate.gif

动画就是这样，在动画执行完之后，右边有好大一片空白，我们当然是要充分利用这片空白的！我们就在上面添加上附近景点啊、公交路线啊、简介啊、图片啊什么鬼的。
其实就是添加多一个UIView，在点击之后先设置Alpha为0，然后用动画将Alpha改为1。这样就搞定了：

- (void)pullStationsAsideWithTag:(long)tag{
    CGSize size_dialog = CGSizeMake(200, self.view.frame.size.height - HEIGHT_NAVIGATIONBAR_STATUSBAR - (GAP_DEFAULT * 4));

    float alpha_route = 0;
    float duration_route = 0.2f;
    if(self.isStationsPullAside){
        alpha_route = 1;
        duration_route = 0.4f;
    }
    else{
        self.view_dialog = [[UIView alloc]initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - 55, HEIGHT_NAVIGATIONBAR_STATUSBAR + (GAP_DEFAULT * 2), size_dialog.width, size_dialog.height)];
        self.view_dialog.backgroundColor = [CommonHandler getColorWithRGB:0xf7ef96];
        [self.view_dialog setAlpha:0];
        [self.view addSubview:self.view_dialog];
        alpha_route = 0;
        duration_route = 0.2f;
    }
    [UIView animateWithDuration:duration_route animations:^{
        [self.view_background_route setAlpha:alpha_route];
    }];
    
    for(UILabel *lb_temp in self.array_label_station){
        if(self.isStationsPullAside){
            [UIView animateWithDuration:0.25f animations:^{
                [self.view_dialog setAlpha:0];
                [lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
            }completion:^(BOOL finished){
                [self.view_dialog removeFromSuperview];
            }];
        }else{
            [UIView animateWithDuration:0.25f animations:^{
                [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
            }completion:^(BOOL finished){
                if(lb_temp.tag == tag){
                    [UIView animateWithDuration:0.15f animations:^{
                        [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 7) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
                        [self.view_dialog setAlpha:1];
                    }];
                }
            }];
        }
    }
    self.isStationsPullAside = !self.isStationsPullAside;
}

最后贴上效果，至于怎么添加内容嘛，有兴趣的可以自己去尝试！

RouteViewPopover.gif

整合代码

然后放上今天的所有代码！

#import "RouteViewController.h"
#import "CommonHandler.h"
#import "AlertMessage.h"

#define GAP_DEFAULT 10

@interface RouteViewController ()

@property (nonatomic, strong) NSNumber *number_station;

@property (nonatomic, strong) NSArray *array_station;
@property (nonatomic, strong) NSMutableArray *array_label_station;

@property (nonatomic, strong) UIView *view_background_route;
@property (nonatomic, strong) UIView *view_dialog;

@property (nonatomic, assign) BOOL isStationsPullAside;

@end

@implementation RouteViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self initRouteView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

- (void)initRouteView{
    self.view.backgroundColor = [CommonHandler getColorWithRed:235 andGreen:235 andBlue:235 andAlpha:1];
    
    [self initData];
}

- (void)initData{
    self.array_station = [NSArray arrayWithObjects:@"起点", @"第一站", @"第二站", @"第三站", @"第四站", @"终点", nil];
    self.number_station = [NSNumber numberWithLong:[self.array_station count] - 2];
    self.array_label_station = [[NSMutableArray alloc]init];

    self.isStationsPullAside = NO;
    
    [self drawRoute];
}

- (void)drawRoute{
    self.view_background_route = [[UIView alloc]initWithFrame:self.view.bounds];
    self.view_background_route.backgroundColor = [UIColor clearColor];
    [self.view addSubview:self.view_background_route];
    
    CGSize size_label = CGSizeMake(120, 40);
    
    UITapGestureRecognizer *gesture_tap_temp1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
    
    UILabel *lb_start = [[UILabel alloc]init];
    
    lb_start.text = self.array_station[0];
    lb_start.textColor = [UIColor whiteColor];
    lb_start.font = [UIFont fontWithName:@"Arial" size:16.0];
    lb_start.textAlignment = NSTextAlignmentCenter;
    
    lb_start.layer.backgroundColor = [CommonHandler getColorWithRGB:0x18aaf2].CGColor;
    lb_start.layer.cornerRadius = 20.0;
    [lb_start.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:(HEIGHT_NAVIGATIONBAR_STATUSBAR + GAP_DEFAULT) andSize:size_label]];
    lb_start.tag = 90000;
    lb_start.userInteractionEnabled = YES;
    [lb_start addGestureRecognizer:gesture_tap_temp1];
    [self.view addSubview:lb_start];
    [self.array_label_station addObject:lb_start];
    
    UITapGestureRecognizer *gesture_tap_temp2 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
    
    UILabel *lb_end = [[UILabel alloc]init];
    
    lb_end.text = [self.array_station lastObject];
    lb_end.textColor = [UIColor whiteColor];
    lb_end.font = [UIFont fontWithName:@"Arial" size:16.0];
    lb_end.textAlignment = NSTextAlignmentCenter;
    
    lb_end.layer.backgroundColor = [UIColor redColor].CGColor;
    lb_end.layer.cornerRadius = 20.0;
    [lb_end.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:self.view.frame.size.height - GAP_DEFAULT - size_label.height andSize:size_label]];
    lb_end.tag = 90000 + [self.array_station count] - 1;
    lb_end.userInteractionEnabled = YES;
    [lb_end addGestureRecognizer:gesture_tap_temp2];
    [self.view addSubview:lb_end];
    
    CGFloat height_middle = (lb_end.frame.origin.y + (lb_end.frame.size.height / 2)) - (lb_start.frame.origin.y + (lb_start.frame.size.height / 2));
    CGFloat gap_station = height_middle / ([self.number_station intValue] + 1);
    
    for(int i = 0; i < [self.number_station intValue]; i++){
        UILabel *lb_temp = [[UILabel alloc]init];
        lb_temp.text = self.array_station[i + 1];
        lb_temp.textAlignment = NSTextAlignmentCenter;
        lb_temp.textColor = [UIColor whiteColor];
        lb_temp.font = [UIFont fontWithName:@"Arial" size:15.0];
        
        lb_temp.layer.backgroundColor = [UIColor orangeColor].CGColor;
        lb_temp.layer.cornerRadius = 15.0;
        [lb_temp.layer setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:((lb_start.frame.origin.y + (lb_start.frame.size.height / 2)) + (gap_station * (i + 1))) - (size_label.height / 2) andSize:size_label]];
        
        [self.view addSubview:lb_temp];
        
        lb_temp.userInteractionEnabled = YES;
        
        UITapGestureRecognizer *gesture_tap_temp = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(singleTapAction:)];
        
        lb_temp.tag = 90000 + i + 1;
        [lb_temp addGestureRecognizer:gesture_tap_temp];
        [self.array_label_station addObject:lb_temp];
    }
    [self.array_label_station addObject:lb_end];
    
    CGSize size_route = CGSizeMake(5, 5);
    CGFloat height_route = gap_station - size_label.height;
    CGFloat gap_route = height_route / size_route.height;
    
    for(int i = 0; i < [self.number_station intValue] + 1; i++){
        for(int j = 0; j < (int)gap_route; j++){
            UILabel *lb_temp = [[UILabel alloc]init];
            if(j % 2 == 0){
                lb_temp.backgroundColor = [UIColor blackColor];
            }else{
                lb_temp.backgroundColor = [UIColor yellowColor];
            }
            [lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:(lb_start.frame.origin.y + lb_start.frame.size.height + ((height_route + size_label.height) * i) + (size_route.height * j)) andSize:size_route]];
            [self.view_background_route addSubview:lb_temp];
        }
    }
}

- (void)singleTapAction:(UITapGestureRecognizer *)sender{
    [self pullStationsAsideWithTag:sender.self.view.tag];
}

- (void)pullStationsAsideWithTag:(long)tag{
    CGSize size_dialog = CGSizeMake(200, self.view.frame.size.height - HEIGHT_NAVIGATIONBAR_STATUSBAR - (GAP_DEFAULT * 4));

    float alpha_route = 0;
    float duration_route = 0.2f;
    if(self.isStationsPullAside){
        alpha_route = 1;
        duration_route = 0.5f;
    }
    else{
        self.view_dialog = [[UIView alloc]initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - 55, HEIGHT_NAVIGATIONBAR_STATUSBAR + (GAP_DEFAULT * 2), size_dialog.width, size_dialog.height)];
        self.view_dialog.backgroundColor = [CommonHandler getColorWithRGB:0xf7ef96];
        [self.view_dialog setAlpha:0];
        [self.view addSubview:self.view_dialog];
        alpha_route = 0;
        duration_route = 0.2f;
    }
    [UIView animateWithDuration:duration_route animations:^{
        [self.view_background_route setAlpha:alpha_route];
    }];
    
    for(UILabel *lb_temp in self.array_label_station){
        if(self.isStationsPullAside){
            [UIView animateWithDuration:0.25f animations:^{
                [self.view_dialog setAlpha:0];
                [lb_temp setFrame:[CommonHandler getVerticaRectlWithSuperView:self.view andYOrigin:lb_temp.frame.origin.y andSize:lb_temp.frame.size]];
            }completion:^(BOOL finished){
                [self.view_dialog removeFromSuperview];
            }];
        }else{
            [UIView animateWithDuration:0.25f animations:^{
                [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 4) * 3), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
            }completion:^(BOOL finished){
                if(lb_temp.tag == tag){
                    [UIView animateWithDuration:0.15f animations:^{
                        [lb_temp setFrame:CGRectMake(0 - ((lb_temp.frame.size.width / 7) * 2), lb_temp.frame.origin.y, lb_temp.frame.size.width, lb_temp.frame.size.height)];
                        [self.view_dialog setAlpha:1];
                    }];
                }
            }];
        }
    }
    self.isStationsPullAside = !self.isStationsPullAside;
}


@end

最后编辑于：2017.11.27 00:40:33

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,921评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,635评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,393评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,836评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,833评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,685评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,043评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,694评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,671评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,670评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,779评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,424评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,027评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,984评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,214评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,108评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,517评论 2赞 343

第一个项目之六--手势和动画

前言

iOS的事件

加上标签

很渣的动画

整合代码

推荐阅读更多精彩内容