打开音乐播放器，发现歌词是逐渐渲染，是不是感到很新颖，却找不到原理呢。还有，引导用户去操作，网上也有自定义segmentCotnroller逐渐渲染，这些都采用了镂空渲染。镂空渲染其实原理很简单。
原理：主要是利用了父视图clipsToBounds裁剪属性，将超出父视图部分的子视图给裁剪掉。利用这一特性，就能实现镂空渲染咯。
效果图:
首先。。我们来分析下镂空图层原理。。
通过设置镂空图层clipsToBounds裁剪属性，就是可以实现镂空渲染图层只现实这么一小块，实际上镂空渲染图层大小是整个屏幕。
接下来，我们去实现下文字逐渐渲染和文字部分渲染功能。
初始化3个图层。。
在改变progress（进度值）更改镂空图层的宽度。
如果是文字部分渲染效果，则不用更改镂空图层的宽度，只需要更改x坐标，以及镂空渲染层的x坐标。 （这2个x坐标轴的大小是取反，为什么要这样，脑补想象下就知道了）
这样就完成镂空文字渲染功能，很简单对吧。
在此基础上，我们就能实现上面效果图所展示的segmentController，和放大镜引导功能了。。具体的代码就不上了，因为原理都一样，只是做了一个进一步的拓展。在具体的demo里大家看着也会明白。。
我也将这些做了封装，也可以直接拿来用。
源码地址github
网友评论