简介

一年前自己自学iOS入门可谓艰辛历程，偶然得到raywenderlich的基本教程便开始琢磨起来，废话不多说直接上图。

正面.png

说明.png

下面主要讲我学到了什么：

一、基本控件
UILabel, UIButton, UISlider, UIWebView

重点知识：

• 为slider设置thumbImage

UIImage *thumbImageNormal = [UIImage imageNamed:@"SliderThumb-Normal"];
    UIImage *thumbImageHighlighted = [UIImage imageNamed:@"SliderThumb-Highlighted"];
    [self.slider setThumbImage:thumbImageNormal forState:(UIControlStateNormal)];
    [self.slider setThumbImage:thumbImageHighlighted forState:(UIControlStateHighlighted)];

• 为slider设置trackImage，此处用到拉伸图片，通过edgeInsets得到图片的一个像素点，用此像素点平铺拉伸得到

UIEdgeInsets insets = UIEdgeInsetsMake(0, 14, 0, 14);
    UIImage *trackLeftImage = [[UIImage imageNamed:@"SliderTrackLeft"] resizableImageWithCapInsets:insets];
    UIImage *trackRightImage = [[UIImage imageNamed:@"SliderTrackRight"] resizableImageWithCapInsets:insets];
    [self.slider setMinimumTrackImage:trackLeftImage forState:(UIControlStateNormal)];
    [self.slider setMaximumTrackImage:trackRightImage forState:(UIControlStateNormal)];

• 用webView加载本地html

NSString *path = [[NSBundle mainBundle] pathForResource:@"BullsEye" ofType:@"html"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    NSURL *baseURL = [NSURL URLWithString:[NSBundle mainBundle].bundlePath];
    [self.webView loadData:data MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];

• 弹出一个alertController

NSString *message = [[NSString alloc] initWithFormat:@"You scored %ld points", points];
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
        [self startNewRound];
        [self updateLabel];
    }];
[alertController addAction:action];
    
  [self presentViewController:alertController animated:YES completion:nil];

• 界面元素的值改变时添加过渡动画 Crossfade

 - (IBAction)startOver:(id)sender {
    [self startNewGame];
    [self updateLabel];
    
    CATransition *transition = [[CATransition alloc] init];
    transition.type = kCATransitionFade;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    transition.duration = 1;
    
    [self.view.layer addAnimation:transition forKey:nil];
}

Crossfade.png

总结

虽然这个小游戏灰常灰常简单，其中还用到AutoLayout，所以在任何尺寸屏幕下运行都是一样的。让我感触最深的是最后的Crossfade动画，简单几行代码就有了如上的效果，amazing，以此也给了我往下学的动力。
源代码传送门

卧薪藏胆，三千越甲可吞吴。