上次我们使用Paint的RadialGradient实现了类似水波纹渲染的效果,这次我们来个更炫酷的,使用shader的梯度渲染来实现雷达扫描效果.这种场景之前迅雷的手机版好像有过这种效果,就是搜索附近的片子之类的.废话不多说,老样子,咱先看效果.这玩意不好录,实际效果比现在看到的好得多,大家可以自己尝试一下.

还是老样子,自定义控件继承自View重写构造方法,我们可能要自定义一些属性.包括,雷达的半径,有多少个环形,环形的颜色,以及梯度渐变的颜色起始值以及末尾值.所以在含有两个参数的构造中我们将这些值取出来:


我们对自定义控件做一个测量,确定我们要画的环形的宽高.


第一步,先画环形(无梯度渐变),也就是雷达的背景:

第二步,画雷达扫描效果,给最大的圆环加入梯度渲染效果:

第三步,就是动画了,让我们的扫描效果动起来:
我们使用Handler来刷新效果:


这样,一个雷达扫描效果就出来了.
网友评论