学习动画总结——视觉效果

圆角
CALayer有一个叫做conrnerRadius的属性控制着图层角的曲率。它是一个浮点数,默认为0(为0的时候就是直角),但是你可以把它设置成任意值。默认情况下,这个曲率值只影响背景颜色而不影响背景图片或是子图层。不过,如果把masksToBounds设置成YES的话,图层里面的所有东西都会被截取。
当设置view 或者 layer的圆角的时候是相互不会影响的。

    UIView *temp = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 200, 200)];
    [self.view addSubview:temp];
    temp.backgroundColor = [UIColor blueColor];

    CALayer * layer = [CALayer layer];
    layer.frame = CGRectMake(50, 50 , 100, 100);
    layer.backgroundColor = [UIColor yellowColor].CGColor;
    [temp.layer addSublayer:layer];
    layer.cornerRadius = 20.0f;

    UIView *temp2 = [[UIView alloc]initWithFrame:CGRectMake(50, 400, 200, 200)];
    [self.view addSubview:temp2];
    temp2.backgroundColor = [UIColor blueColor];
    temp2.layer.cornerRadius = 20.f;

    CALayer * layer2 = [CALayer layer];
    layer2.frame = CGRectMake(50, 50 , 100, 100);
    layer2.backgroundColor = [UIColor yellowColor].CGColor;
    [temp2.layer addSublayer:layer2];

学习动画总结——视觉效果_第1张图片

当将两个view的layer层的位置改成 -50 ,-50 时候,此时的layer就在view的外边。
学习动画总结——视觉效果_第2张图片
当不想要外边的时候可以设置masksToBounds 属性为yes。我将temp2的masksToBounds设置为yes乐。就变成了如下效果。
学习动画总结——视觉效果_第3张图片

图层边框
CALayer另外两个非常有用属性就是borderWidth和borderColor。二者共同定义了图层边的绘制样式。这条线(也被称作stroke)沿着图层的bounds绘制,同时也包含图层的角。
borderWidth是以点为单位的定义边框粗细的浮点数,默认为0.borderColor定义了边框的颜色,默认为黑色。
borderColor是CGColorRef类型,而不是UIColor,所以它不是Cocoa的内置对象。不过呢,你肯定也清楚图层引用了borderColor,虽然属性声明并不能证明这一点。CGColorRef在引用/释放时候的行为表现得与NSObject极其相似。但是Objective-C语法并不支持这一做法,所以CGColorRef属性即便是强引用也只能通过assign关键字来声明。

我将temp的边框设置下看下效果。

    temp.layer.borderWidth = 10.0f;

学习动画总结——视觉效果_第4张图片

temp的变化时加上了边框,但是边框并不会把寄宿图或子图层的形状计算进来,如果图层的子图层超过了边界,或者是寄宿图在透明区域有一个透明蒙板,边框仍然会沿着图层的边界绘制出来

阴影
阴影往往可以达到图层深度暗示的效果。也能够用来强调正在显示的图层和优先级(比如说一个在其他视图之前的弹出框),不过有时候他们只是单纯的装饰目的。
给shadowOpacity属性一个大于默认值(也就是0)的值,阴影就可以显示在任意图层之下。shadowOpacity是一个必须在0.0(不可见)和1.0(完全不透明)之间的浮点数。如果设置为1.0,将会显示一个有轻微模糊的黑色阴影稍微在图层之上。若要改动阴影的表现,你可以使用CALayer的另外三个属性:shadowColor,shadowOffset和shadowRadius。
显而易见,shadowColor属性控制着阴影的颜色,和borderColor和backgroundColor一样,它的类型也是CGColorRef。阴影默认是黑色,大多数时候你需要的阴影也是黑色的。
shadowOffset属性控制着阴影的方向和距离。它是一个CGSize的值,宽度控制这阴影横向的位移,高度控制着纵向的位移。shadowOffset的默认值是 {0, -3},意即阴影相对于Y轴有3个点的向上位移。
为什么要默认向上的阴影呢?尽管Core Animation是从图层套装演变而来(可以认为是为iOS创建的私有动画框架),但是呢,它却是在Mac OS上面世的,前面有提到,二者的Y轴是颠倒的。这就导致了默认的3个点位移的阴影是向上的。在Mac上,shadowOffset的默认值是阴影向下的,这样你就能理解为什么iOS上的阴影方向是向上的了。
shadowRadius属性控制着阴影的模糊度,当它的值是0的时候,阴影就和视图一样有一个非常确定的边界线(黑乎乎的,和之前的边框很相似)。当值越来越大的时候,边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影,所以一个非零值再合适不过了。
再设置阴影的时候一定要设置shadowOpacity,我一开始就没设置显示不出来(。。。。)。
我将temp2和layer2 都设置阴影了。对于temp寄宿图石油透明的话,通过阴影剪裁会计算出阴影形状,通过这些来完美搭配图层形状从而创建一个阴影,效果如下图。

    temp.layer.contents = (__bridge id _Nullable)(im.CGImage);
    temp.layer.shadowOpacity = 5.0f;
    temp.layer.shadowOffset = CGSizeMake(2, 5);
    temp.layer.shadowRadius = 10.0f;

    layer2.shadowOpacity = 5.f;
    layer2.shadowOffset = CGSizeMake(- 5 , 9);
    layer2.shadowRadius = 10.0f;
    temp2.layer.shadowOpacity = 5.f;
    temp2.layer.shadowOffset = CGSizeMake(-5, 9);
    temp2.layer.shadowRadius = 10.0f;

学习动画总结——视觉效果_第5张图片

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

    CGMutablePathRef squarePath = CGPathCreateMutable();
    CGPathAddEllipseInRect(squarePath, NULL, temp.bounds);
    temp.layer.shadowPath = squarePath;

学习动画总结——视觉效果_第6张图片
如果是一个矩形或者是圆,用CGPath会相当简单明了。但是如果是更加复杂一点的图形,UIBezierPath类会更合适,它是一个由UIKit提供的在CGPath基础上的Objective-C包装类。
图层蒙板(这个地方理解不深)
CALayer有一个属性叫做mask可以解决这个问题。这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层,mask图层定义了父图层的部分可见区域。
mask图层的Color属性是无关紧要的,真正重要的是图层的轮廓。mask属性就像是一个饼干切割机,mask图层实心的部分会被保留下来,其他的则会被抛弃。如果mask图层比父图层要小,只有在mask图层里面的内容才是它关心的,除此以外的一切都会被隐藏起来。(这个mask后续补充)

    UIImageView *ima = [[UIImageView alloc]initWithImage:[UIImage  imageNamed:@"10.pic_hd"]];
    ima.frame = CGRectMake(0, 0, 150, 150);
    [temp addSubview:ima];
    //遮罩
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = ima.bounds;
    UIImage *maskIamge = [UIImage imageNamed:@"1"];
    maskLayer.contents = (__bridge id _Nullable)(maskIamge.CGImage);

    temp.layer.mask = maskLayer;

学习动画总结——视觉效果_第7张图片

你可能感兴趣的:(动画)