本篇记录星级评分组件的创建过程以及CALayer的运用。为了实现一个星级评分的组件,使用了CALayer,涉及到mask、CGPathRef、UIBezierPath、动画和一个计算多角星关键节点的算法。CALayer管理基于图像的内容,并让我们可以在内容上添加动画。UIView ...
本篇记录星级评分组件的创建过程以及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
(#换成@)。