快速进度指示器图像蒙版

首先,这个项目是使用Swift构建的。

我想创建一个自定义进度指示器,在脚本运行时“填满”。 该脚本将调用从远程服务器提取的JSON提要。

为了更好地想象我追求的是什么,我做了这个:

在此处输入图像描述

我的猜测是有两个PNG图像; 一个白色和一个红色,然后根据进度量简单地做一些掩蔽。

有什么想法吗?

掩盖对此可能有点过头了。 只需每次重绘图像。 当你这样做时,你绘制红色矩形以填充图形的下半部分,达到你想要的任何高度; 然后你绘制液滴图像(PNG),中间有透明度,红色矩形透过。 因此,一个PNG就足够了,因为每次重绘时都可以“实时”绘制红色矩形。

我非常喜欢你的绘图,我想把它变为现实,所以这是我的工作代码(我的PNG名为tear.pngiv是我界面中的UIImageView; percent应该是介于0和1之间的CGFloat):

 func redraw(percent:CGFloat) { let tear : UIImage! = UIImage(named:"tear")! if tear == nil {return} let sz = tear.size let top = sz.height*(1-percent) UIGraphicsBeginImageContextWithOptions(sz, false, 0) let con = UIGraphicsGetCurrentContext() UIColor.redColor().setFill() CGContextFillRect(con, CGRectMake(0,top,sz.width,sz.height)) tear.drawAtPoint(CGPointMake(0,0)) self.iv.image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() } 

我还连接了一个UISlider,它的action方法将其value转换为CGFloat并调用该方法,因此前后移动滑块会在泪珠中上下移动红色填充。 我可以玩这几个小时!

在此处输入图像描述