你的位置:首页 > 软件开发 > 操作系统 > 干货之运用CALayer创建星级评分组件(五角星)

干货之运用CALayer创建星级评分组件(五角星)

发布时间:2016-11-04 19:00:11
本篇记录星级评分组件的创建过程以及CALayer的运用。为了实现一个星级评分的组件,使用了CALayer,涉及到mask、CGPathRef、UIBezierPath、动画和一个计算多角星关键节点的算法。CALayer管理基于图像的内容,并让我们可以在内容上添加动画。UIView ...

干货之运用CALayer创建星级评分组件(五角星)

本篇记录星级评分组件的创建过程以及CALayer的运用。

为了实现一个星级评分的组件,使用了CALayer,涉及到mask、CGPathRef、UIBezierPath、动画和一个计算多角星关键节点的算法。

CALayer管理基于图像的内容,并让我们可以在内容上添加动画。UIView及其子类拥有一个属性layer,我们可以运用该属性做出非常多的效果。例如圆角、多边形、甚至自定义形状的view,局部遮挡,擦除模糊效果,局部内容依次闪亮效果,弧形进度条等等。

首先查看CALayer的一个属性mask,这个属性也是CALayer类型,跟他的名字意义一样,就是用来遮挡内容的,默认为nil,所以我们可以看到一个UIView上的内容。如果给一个可见内容的view的layer属性赋值CALayer实例,那这个view立刻就“消失”了。如下代码:

CALayer *maskLayer = [CALayer layer];

maskLayer.frame = testView.bounds;

self.layer.mask = maskLayer;

再看另一个类CAShapeLayer,继承与CALayer,并具有众多额外属性,例如path、fillColor、strokeColor。其中的path属性,可以决定“不遮挡”路径范围内的内容。如果我们将之前的mask属性赋值为一个CAShapeLayer实例,或者在之前的CALayer实例上addSublayer该实例,并指定一个中心圆的路径,那就实现了常见的圆形头像显示效果。与设置UIView的layer的corner作用一样。

需要注意一点,如果添加的CAShapeLayer的fillColor为[UIColor clearColor].CGColor,即使在path范围内,也将失去“不遮挡”作用,而该值默认为不透明黑色。简单来说,如果透明就将遮挡内容。可以发现,mask及其sublayer上的填充和路径颜色,都是不会显示的,只用于决定是否遮挡自身所在layer的内容。

利用这一特点,可以实现“开门”和“关门”的类似效果,在一个CALayer上添加两个sublayer作为“门”。还可以实现泼墨等更多的效果。

值得一提的是,每个sublayer也可以利用frame和mask属性做出相对于view的局部的遮挡效果。

回到CAShapeLayer的fillColor属性,该属性将path范围内填充上某种颜色;strokeColor是指定path轨迹上的颜色,strokeStart、strokeEnd指定轨迹的开始和结束的绘制点;还有line相关的属性指定线的属性。运用这些属性,可以做出任意形状的进度条、加载动画等。

从以上记录可以看出path属性很重要,该属性是CGPathRef类型。常用创建方法为 CGPathCreateMutable(void)系列方法:

  CGMutablePathRef path = CGPathCreateMutable();  CGPoint firstPoint = [[keyPointsArray firstObject] CGPointValue];  CGPathMoveToPoint(path, nil, firstPoint.x, firstPoint.y);    for (int i = 1; i < keyPointsArray.count; i++) {    CGPoint currentPoint = [keyPointsArray[i] CGPointValue];    CGPathAddLineToPoint(path, nil, currentPoint.x, currentPoint.y);  }    CGPathAddLineToPoint(path, nil, firstPoint.x, firstPoint.y);    _maskLayer.path = path;  _starShapeLayer.path = path;  CGPathRelease(path);

原标题:干货之运用CALayer创建星级评分组件(五角星)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录