美文网首页
镂空渲染

镂空渲染

作者: 雷晏 | 来源:发表于2016-07-31 22:58 被阅读98次

    打开音乐播放器,发现歌词是逐渐渲染,是不是感到很新颖,却找不到原理呢。还有,引导用户去操作,网上也有自定义segmentCotnroller逐渐渲染,这些都采用了镂空渲染。镂空渲染其实原理很简单。

    原理:主要是利用了父视图clipsToBounds裁剪属性,将超出父视图部分的子视图给裁剪掉。利用这一特性,就能实现镂空渲染咯。

    效果图:

    首先。。我们来分析下镂空图层原理。。

    通过设置镂空图层clipsToBounds裁剪属性,就是可以实现镂空渲染图层只现实这么一小块,实际上镂空渲染图层大小是整个屏幕。

    接下来,我们去实现下文字逐渐渲染文字部分渲染功能。

    初始化3个图层。。

    在改变progress(进度值)更改镂空图层的宽度。

    如果是文字部分渲染效果,则不用更改镂空图层的宽度,只需要更改x坐标,以及镂空渲染层的x坐标。 (这2个x坐标轴的大小是取反,为什么要这样,脑补想象下就知道了)

    这样就完成镂空文字渲染功能,很简单对吧。

    在此基础上,我们就能实现上面效果图所展示的segmentController,和放大镜引导功能了。。具体的代码就不上了,因为原理都一样,只是做了一个进一步的拓展。在具体的demo里大家看着也会明白。。

    我也将这些做了封装,也可以直接拿来用。

    源码地址github

    相关文章

      网友评论

          本文标题:镂空渲染

          本文链接:https://www.haomeiwen.com/subject/ofcxsttx.html