iOS 动画 第四章 视觉效果

[self conrnerRadiusTest];
    
    //shadowPath
[self shadowPathTest];
    
    //mask
[self maskTest];

//拉伸过滤
[self filterTest];
    
    //alpha
[self alphaTest];

圆角conrnerRadius：默认情况下，这个曲率值只影响背景颜色而不影响背景图片或是子图层。不过，如果把masksToBounds设置成YES的话，图层里面的所有东西都会被截取。

- (void)conrnerRadiusTest {
    UIView *layerView1 = [[UIView alloc] init];
    layerView1.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    layerView1.backgroundColor = [UIColor redColor];
    
    UIView *layerView2 = [[UIView alloc] init];
    layerView2.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    layerView2.backgroundColor = [UIColor blueColor];
    [layerView2 addSubview:layerView1];
    
    UIView *shadowView = [[UIView alloc] init];
    shadowView.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    shadowView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:shadowView];
    [self.view addSubview:layerView2];


    //set the corner radius on our layers
    layerView1.layer.cornerRadius = 20.0f;
    layerView2.layer.cornerRadius = 10.0f;
    shadowView.layer.cornerRadius = 10.0f;
    
    //add a border to your layers
    layerView1.layer.borderWidth = 2.0f;
    layerView2.layer.borderWidth = 2.0f;
    
    //add a shadow to layerView1
    layerView2.layer.shadowOpacity = 0.5f;
    layerView2.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
    layerView2.layer.shadowRadius = 5.0f;
    
    //add same shadow to shadowView (not layerView2)
    shadowView.layer.shadowOpacity = 0.5f;
    shadowView.layer.shadowOffset = CGSizeMake(-10.0f, 10.0f);
    shadowView.layer.shadowRadius = 5.0f;
    
    //enable clipping on the second layer
    layerView2.layer.masksToBounds = YES;
}

图层边框

//borderWidth:以点为单位的定义边框粗细的浮点数，默认为0.
//borderColor:定义了边框的颜色，默认为黑色。 CGColorRef

阴影

//shadowOpacity:是一个必须在0.0（不可见）和1.0（完全不透明）之间的浮点数 默认值0
//CALayer的另外三个属性：shadowColor(CGColorRef)，shadowOffset(CGSize)默认值是 {0, -3}和shadowRadius属性控制着阴影的模糊度。

阴影裁剪

//图层的阴影继承自内容的外形，而不是根据边界和角半径来确定
//一个只画阴影的空的外图层，和一个用masksToBounds裁剪内容的内图层

shadowPath属性

//shadowPath是一个CGPathRef类型（一个指向CGPath的指针）。CGPath是一个Core Graphics对象，用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。

- (void)shadowPathTest {
    UIView *layerView1 = [[UIView alloc] init];
    layerView1.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    layerView1.backgroundColor = [UIColor redColor];
    
    UIView *layerView2 = [[UIView alloc] init];
    layerView2.frame = CGRectMake(200.0f, 200.0f, 100.0f, 100.0f);
    layerView2.backgroundColor = [UIColor blueColor];
    
    [self.view addSubview:layerView1];
    [self.view addSubview:layerView2];
    
    //enable layer shadows
    layerView1.layer.shadowOpacity = 0.5f;
    layerView2.layer.shadowOpacity = 0.5f;
    
    //create a squre shadow
    CGMutablePathRef squarePath = CGPathCreateMutable();
    CGPathAddRect(squarePath, NULL, layerView1.bounds);
    layerView1.layer.shadowPath = squarePath;
    CGPathRelease(squarePath);
    
    //create a cirular shadow
    CGMutablePathRef circlePath = CGPathCreateMutable();
    CGPathAddEllipseInRect(circlePath, NULL, layerView2.bounds);
    layerView2.layer.shadowPath = circlePath;
    CGPathRelease(circlePath);
}

图层蒙板

//mask:CALayer类型 mask图层定义了父图层的部分可见区域

- (void)maskTest {
    UIImageView *mealView = [[UIImageView alloc] init];
    mealView.frame = CGRectMake(50.0f, 50.0f, 200.0f, 200.0f);
    mealView.image = [UIImage imageNamed:@"Meal"];
    [self.view addSubview:mealView];
    
    //create mask layer
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = CGRectMake(10.0f, 10.0f, 60.0f, 60.0f);
    UIImage *maskImage = [UIImage imageNamed:@"Meal"];
    maskLayer.contents = (__bridge id)maskImage.CGImage;

    //apply mask to image layer
    mealView.layer.mask = maskLayer;
}

拉伸过滤

//minificationFilter:缩小图片
//magnificationFilter:放大图片
/*
CALayer为此提供了三种拉伸过滤方法，他们是：
kCAFilterLinear: 默认 双线性滤波算法
kCAFilterNearest: 三线性滤波算法
kCAFilterTrilinear:最近过滤 就是取样最近的单像素点而不管其他的颜色
*/

- (void)filterTest {
    UIImage *digits = [UIImage imageNamed:@"Meal"];
    
    //set up digit views
    for (int k = 0; k < 6; k++) {
        UIView *view = [[UIView alloc] init];
        view.frame = CGRectMake(0.0, 110 * k, 100.0f, 100.0f);
        view.layer.contents = (__bridge id)digits.CGImage;
        view.layer.contentsRect = CGRectMake(0.0, 0.0f, 0.1f, 1.0f);
        view.layer.contentsGravity = kCAGravityResizeAspect;
        //filter
        view.layer.magnificationFilter = kCAFilterNearest;
        [self.view addSubview:view];
    }
    
    timerDigit = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(tickDigit) userInfo:nil repeats:YES];
    
    //set initial clock time
    [self tickDigit];
}

- (void)setDigit:(NSInteger)digit forView:(UIView *)view {
    //adjust contentsRect to select correct digit
    view.layer.contentsRect = CGRectMake(digit * 0.1, 0, 0.1, 1.0);
}

- (void)tickDigit {
    //convert time to hours, minutes and seconds
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    NSUInteger units = NSCalendarUnitHour| NSCalendarUnitMinute | NSCalendarUnitSecond;
    NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
    
    //set hours
    [self setDigit:components.hour / 10 forView:digitViews[0]];
    [self setDigit:components.hour % 10 forView:digitViews[1]];
    
    //set minutes
    [self setDigit:components.minute / 10 forView:digitViews[2]];
    [self setDigit:components.minute % 10 forView:digitViews[3]];
    
    //set second
    [self setDigit:components.second / 10 forView:digitViews[4]];
    [self setDigit:components.second % 10 forView:digitViews[5]];
}

组透明

//UIView有一个叫做alpha的属性来确定视图的透明度。CALayer有一个等同的属性叫做opacity，这两个属性都是影响子层级的

//设置了一个图层的透明度，它包含的整个图层树像一个整体一样的透明效果
//1种Info.plist文件中的UIViewGroupOpacity为YES来达到，但是这个设置会影响到这个应用，整个app可能会受到不良影响。
//2种设置CALayer的一个叫做shouldRasterize属性
//为了启用shouldRasterize属性，我们设置了图层的rasterizationScale属性。默认情况下，所有图层拉伸都是1.0， 所以如果你使用了shouldRasterize属性，你就要确保你设置了rasterizationScale属性去匹配屏幕，以防止出现Retina屏幕像素化的问题。
//shouldRasterize和UIViewGroupOpacity一起的时候，性能问题就出现了

- (UIButton *)customButton {
    //creat button
    CGRect frame = CGRectMake(0, 0, 150, 150);
    UIButton *button = [[UIButton alloc] initWithFrame:frame];
    button.backgroundColor = [UIColor redColor];
    button.layer.cornerRadius = 10;
    
    //add label
    frame = CGRectMake(20, 10, 110, 30);
    UILabel *label = [[UILabel alloc] initWithFrame:frame];
    label.text = @"Hello Word";
    label.textAlignment = NSTextAlignmentCenter;
    [button addSubview:label];
    return button;
}

- (void)alphaTest {
    //create opaque button
    UIButton *button1 = [self customButton];
    button1.center = CGPointMake(50, 150);
    [self.view addSubview:button1];
    
    //create translucent button
    UIButton *button2 = [self customButton];
    button2.center = CGPointMake(250, 150);
    button2.alpha = 0.5;
    [self.view addSubview:button2];
    
    //enable rasterization for the translucent button
    button2.layer.shouldRasterize = YES;
    button2.layer.rasterizationScale = [UIScreen mainScreen].scale;
}