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