关于CAShapeLayer的一些实用案例和技巧

一、使用CAShapeLayer实现复杂的View的遮罩效果

1.1、案例演示

最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者。服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定义遮罩效果,就是本文要讲的内容。效果演示如下:第一张是一个View的遮罩效果,第二张是UIImageView的遮罩效果。

1595403-283805c718649984

演示图片

1.2、实现机制

在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer,然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer。CAShapeLayer可以根据几个点的依次连线,产生一个闭合空间的layer。如下图所示:

1595403-ce9620c2aae48fd6

这里写图片描述

1.3、实现代码

实现方式为实现了CAShapeLayer的ViewMask的Category。

1.4、调用方式

二、使用CAShapeLayer实现一个音量大小动态改变的控件

2.1、案例演示

对于实时显示语音音量大小的需求,发现很多人的实现方式通过预放置多张图进行切换进行完成的。这样的处理,不但会浪费App的资源存储空间,而且效率也不高。对于符合某一定规律动态改变的图形,我们也可以考虑通过代码的方式来实现。

演示图片

2.2、实现机制

1595403-208f4752cf6ba0ab

描述

外部轮廓View主要控制显示大小和显示的圆角效果。内部的Layer主要控制动态显示的高度,虽然他是矩形的。但是当把该Layer加入到View中,而该View设置了_dynamicView.clipsToBounds = YES;。内部的Layer超过外部轮廓的部分,则会被切除掉。

如此说来,我们只需要动态改变内部Layer显示的高度,即可完成该效果显示。是不是很简单啊。。

2.3、实现代码

_dynamicView 表示外部轮廓的View。

indicateLayer 表示内容动态显示的Layer。

实现动态改变的函数如下:

三、圆形进度条

3.1、案例演示

最近有一个小需求,就是要做一个圆形进度条,大概样子如下:

演示图片


在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候,我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候,发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性,实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。

3.2、属性详解

苹果官方给出这两个属性的解释为:
/* These values define the subregion of the path used to draw the

  • stroked outline. The values must be in the range [0,1] with zero
  • representing the start of the path and one the end. Values in
  • between zero and one are interpolated linearly along the path
  • length. strokeStart defaults to zero and strokeEnd to one. Both are
  • animatable. */
    大概意思就是:我们可以对绘制的Path进行分区。这两个属性的值在0~1之间,0代表Path的开始位置,1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0,strokeEnd默认值为1。这两个属性都支持动画。

我们通过以上代码设置:strokeStart=0.1f; strokeEnd=0.7f则显示如下图所示。

1595403-a99759b0dd387a78

演示图片

3.3、圆形进度条的实现代码

四、联系方式

新浪微博
github
简书首页

欢迎加好友、一起交流。

1 5 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部