Skip to content

Latest commit

 

History

History
42 lines (21 loc) · 1.65 KB

content.md

File metadata and controls

42 lines (21 loc) · 1.65 KB

对渐变视图的实现方案的探究

作者: 高老师很忙

如果想实现一个蓝色到绿色的渐变视图,大家会有怎样的方案呢?

  • 首先我想到的是 CAGradientLayer 来实现,效果如下图:

看着效果还可以,需要注意的是如果想均匀过度就不要去设置 locations 属性,要不然就是如下效果喽:

这种实现方式比较简单,几行代码就可以搞定,但是放大图片会发现会有一些横杠杠,不明显,如果是视觉效果要求不严格,这种方式是完全没问题的。

  • Core Image 实现这种方案应该也不在话下,效果如下图:

色彩更亮丽一些,个人更喜欢这种效果,大家可以明显看出差异来。

  • 用 Core Graphics 来实现视图的绘制,尝试了使用 CGShadingRef 绘制,效果如图:

过度效果不够丝滑,又尝试使用了 CGGradientRef 去绘制,效果如下图:

效果好多了,这种效果和 CAGradientLayer 效果比较相近,但是使用 CGGradientRef 绘制视觉效果更好一些(专门请教了设计师,虽然我的肉眼凡胎并没有看出明显差异,但是放大后横条明显少一些)。

GPUImage 应该也是可以实现的,大家可以尝试一下!

关于效率,我简单测试了一下(绘制200x200,蓝色到绿色渐变,绘制了10次的平均值):

使用 CGGradientRef 绘制效率比其他方式要突出一些。

大家可以根据不同场景来使用不同的方式去绘制,如果有更好的方案,欢迎一起讨论!