有见过这类不规则的进度条么？像这样：
图1.gif
让我们先看看它的图层:
图2.png
深一点的是底部图层，我们标注为1，而亮色系的图层，我们标注为2，看上去只是图层的简单叠加，但难点在于如何让2图层只显示我们想要它显示的部分呢，比如进度到了45%，图层2只是显示了一部分，像这样:
图3.png
谜底就在于Layer Masking，就是图层蒙版(mask)。那么什么是图层蒙版(mask)呢，网上有太多的资料了，这里简单的说一下，如下图:
图4.png
看上去，图层蒙版(mask)就像一个特殊形状的抠图器，大家小时候玩过橡皮泥印吧，像这样:
图5.png
那么这个橡皮泥印就是图层蒙版(mask)，而橡皮泥就是我们的原视图。通过控制图层蒙版(mask)的位置，就控制图层2的显示多少。原理就是如此。
这里是Demo地址：https://github.com/zsading/GiftProgressViewDemo
如果你喜欢，别忘了star这个项目。Enjoy :)
有见过这类不规则的进度条么？像这样： 让我们先看看它的图层: 深一点的是底部图层，我们标注为1，而亮色系的图层，我...
分享一个扇形进度条，核心思想是用贝塞尔曲线绘制扇形形成进度条子单位，然后通过修改layer的fillcolor实现...
聊天汽泡实现的两种的方式：1、用CAShapeLayer和UIBezierPath创建一个不规则layer,然后把...
一般成长值类型的进度条都是纯色的，比如这样的： 纯色的进度条无论用layer还是view，只要计算好比例就是很好做...
使用ProgressBar时，用layer＋shape设置好圆角后，发现只有外层背景有圆角，进度条并没有设置成圆角...
用Quartz2D的知识做一个圆形进度条。 demo的下载地址 吻我???
最近工程中用到一个渐变色进度条，先看效果图： 用OC写的实现方法如下： 创建一个view，添加自定义layer： ...
这次呢，让我们重温一下儿时的乐趣，用Python做一个飞机大战的小游戏。接下来，让我们一起走进“飞机大战”。 一....
这次呢，让我们重温一下儿时的乐趣，用Python做一个飞机大战的小游戏。接下来，让我们一起走进“飞机大战”。一.确...
UIBezierPath实现不规则UIView：思想：在view上绘制一个封闭的路径然后用layer.mask 遮...
本文标题：这次让我们用Layer Masking做一个不规则的进度条
本文链接：https://www.haomeiwen.com/subject/uuclixtx.html
网友评论