一、前言

剛開始看到知乎日?qǐng)?bào)的啟動(dòng)界面時(shí)，下面的動(dòng)畫logo以及配上好看的圖片，特別舒服。然后老毛病又犯了，想著怎么去實(shí)現(xiàn)它，好了，下面還是說說這效果的實(shí)現(xiàn)。

二、效果圖

demo0.gif

三、需要掌握的

這里的重點(diǎn)在于logo動(dòng)畫的實(shí)現(xiàn)。這里用到的是用CGContextRef畫圖。 思路為自定義一個(gè)繼承UIView的view，然后重寫drawRect方法，在這個(gè)方法里畫圖。Graphics Context是圖形上下文，可以將其理解為一塊畫布，我們可以在上面進(jìn)行繪畫操作，繪制完成后，將畫布放到我們的view中顯示即可，view看作是一個(gè)畫框。
下面介紹一些常用的圖形

a. 畫圓

//context就相當(dāng)于是畫布
CGContextRef context = UIGraphicsGetCurrentContext();
//畫筆線的顏色
CGContextSetRGBStrokeColor(context, 1, 1, 1, 1.0);
//設(shè)置填充顏色 (這里沒什么用)
CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);
//線的寬度
CGContextSetLineWidth(context, 1.0);
//參數(shù)分別為：哪個(gè)畫布，圓點(diǎn)坐標(biāo)x，圓點(diǎn)坐標(biāo)y，半徑，開始的弧度，結(jié)束的弧度，clockwise 0為順時(shí)針，1為逆時(shí)針。
//添加一個(gè)圓
CGContextAddArc(context, 100, 20, 15, 0, 2*M_PI, 0); 
//繪制路徑
CGContextDrawPath(context, kCGPathStroke);

注：這里最后的kCGPathStroke有很多類型：

typedef CF_ENUM (int32_t, CGPathDrawingMode) {
  kCGPathFill, // 填充
  kCGPathEOFill,
  kCGPathStroke, // 只畫邊框
  kCGPathFillStroke,
  kCGPathEOFillStroke // 填充和邊框
};

b. 直線

CGPoint aPoints[3];//坐標(biāo)點(diǎn)
aPoints[0] = CGPointMake(100, 80);//坐標(biāo)1
aPoints[1] = CGPointMake(130, 80);//坐標(biāo)2
aPoints[2] = CGPointMake(130, 100);//坐標(biāo)3
//參數(shù)分別為：哪個(gè)畫布，坐標(biāo)數(shù)組， 個(gè)數(shù)。
CGContextAddLines(context, aPoints, 3);//添加線
CGContextDrawPath(context, kCGPathStroke); //根據(jù)坐標(biāo)繪制路徑

c. 矩形

CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);//填充顏色CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);//線框顏色
CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//畫方框
CGContextDrawPath(context, kCGPathFillStroke);//繪畫路徑

其實(shí)矩形完全可以用畫直線的方式實(shí)現(xiàn)。

四、實(shí)現(xiàn)

新建一個(gè)view繼承UIView并重寫drawRect方法

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        self.layer.cornerRadius = 10;
        self.layer.borderColor = [UIColor whiteColor].CGColor;
        self.layer.borderWidth = 1;
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    CGFloat radius = 12;
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddArc(context, self.bounds.size.width * 0.5, self.bounds.size.width * 0.5, radius, M_PI/2, 0, 0);
    CGContextSetLineWidth(context, 5);
    [[UIColor lightGrayColor] set];
    CGContextStrokePath(context);
}

先看效果：

demo1.png

已經(jīng)有了logo但是沒有動(dòng)畫。動(dòng)畫實(shí)現(xiàn)的思路是使用定時(shí)器。代碼如下：

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        self.layer.cornerRadius = 10;
        self.layer.borderColor = [UIColor whiteColor].CGColor;
        self.layer.borderWidth = 1;
        
        _timer = [NSTimer timerWithTimeInterval:0.01 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
        [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
        _count = 1;
        _maxCount = 100;
    }
    return self;
}

- (void)timerAction
{
    if (_count == _maxCount) {
        [_timer invalidate];
        self.animationDoneBlock();
        return;
    } else {
        _count ++;
        [self setNeedsDisplay];
    }
}

- (void)drawRect:(CGRect)rect
{
    CGFloat radius = 12;
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 重點(diǎn)，計(jì)算當(dāng)前的終點(diǎn)角度
    CGFloat angle = (M_PI*3/2)/_maxCount * _count + M_PI/2;
    CGContextAddArc(context, self.bounds.size.width * 0.5, self.bounds.size.width * 0.5, radius, M_PI/2, angle, 0);
    CGContextSetLineWidth(context, 5);
    [[UIColor lightGrayColor] set];
    CGContextStrokePath(context);
}

解釋一下代碼，每0.01秒執(zhí)行一次timerAction方法，如果當(dāng)前的count沒有到達(dá)maxCount，那就重繪視圖，然后angle會(huì)根據(jù)當(dāng)前的終點(diǎn)角度，由于每0.01秒重繪一次，就會(huì)有較光滑的動(dòng)畫效果。
當(dāng)?shù)竭_(dá)maxCount時(shí)候，回調(diào)。告訴控制器動(dòng)畫結(jié)束。

控制器代碼：

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self setupView];
    
    [self getData];
}

- (void)setupView
{
    self.imageView = [UIImageView new];
    self.imageView.frame = [UIScreen mainScreen].bounds;
    self.imageView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.imageView];
    
    
    self.textLabel = [UILabel new];
    self.textLabel.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height-125, [UIScreen mainScreen].bounds.size.width, 20);
    self.textLabel.textColor = [UIColor whiteColor];
    self.textLabel.font = [UIFont systemFontOfSize:12];
    self.textLabel.textAlignment = NSTextAlignmentCenter;
    [self.imageView addSubview:self.textLabel];
    
    
    UIView *bottomView = [UIView new];
    bottomView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height-95, [UIScreen mainScreen].bounds.size.width, 95);
    bottomView.backgroundColor = [UIColor colorWithWhite:0.13 alpha:1.0];
    [self.imageView addSubview:bottomView];
    
    // 創(chuàng)建logoView
    self.logoView = [[YQLogoView alloc] initWithFrame:CGRectMake(25, 25, 45, 45)];
    __weak __typeof(self) weakSelf  = self;
    [self.logoView setAnimationDoneBlock:^{
        [weakSelf hide];
    }];
    [bottomView addSubview:self.logoView];
    
    UILabel *label1 = [UILabel new];
    label1.frame = CGRectMake(80, 20, 200, 30);
    label1.font = [UIFont systemFontOfSize:19];
    label1.text = @"知乎日?qǐng)?bào)";
    label1.textColor = [UIColor whiteColor];
    [bottomView addSubview:label1];
    
    UILabel *label2 = [UILabel new];
    label2.frame = CGRectMake(80, 50, 200, 20);
    label2.font = [UIFont systemFontOfSize:15];
    label2.text = @"每天三次，每次七分鐘";
    label2.textColor = [UIColor lightGrayColor];
    [bottomView addSubview:label2];
}

- (void)getData
{
    // 獲得NSURLSession對(duì)象
    NSURLSession *session = [NSURLSession sharedSession];

    // 創(chuàng)建請(qǐng)求
    NSString *urlStr = @"http://news-at.zhihu.com/api/4/start-image/1080*1776";
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlStr]];
    
    // 創(chuàng)建任務(wù)
    NSURLSessionDataTask *task = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
        NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:nil];
        NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:dic[@"img"]]];
        dispatch_async(dispatch_get_main_queue(), ^{
            self.textLabel.text = dic[@"text"];
            self.imageView.image = [UIImage imageWithData:imageData];
        });
    }];
    
    // 啟動(dòng)任務(wù)
    [task resume];
}

- (void)hide
{
    [UIView animateWithDuration:0.8 delay:1.0 options:0 animations:^{
        self.view.transform = CGAffineTransformMakeScale(1.2, 1.2);
        self.view.alpha = 0.01;
    } completion:^(BOOL finished) {
        [self.view removeFromSuperview];
    }];
}

拓展

展示啟動(dòng)界面的方法也有很多，我這里使用的是建一個(gè)UIWindow的分類，并自定義展示方法。方法的實(shí)現(xiàn)：

- (void)showLanuchPage
{
    YQLaunchViewController *launchVC = [[YQLaunchViewController alloc] init];
    [self addSubview:launchVC.view];
}

使用：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = [[ViewController alloc] init];
    [self.window makeKeyAndVisible];
    [self.window showLanuchPage];
    return YES;
}