《iOS球形波浪加載進(jìn)度控件－HcdProcessView》這篇文章已經(jīng)展示了我在項(xiàng)目中編寫(xiě)的一個(gè)球形進(jìn)度加載控件HcdProcessView，這篇文章我要簡(jiǎn)單介紹一下我的制作過(guò)程。
思路
首先我放棄了使用通過(guò)改變圖片的位置來(lái)實(shí)現(xiàn)上面的動(dòng)畫(huà)效果，雖然這樣也可以實(shí)現(xiàn)如上的效果，但是從性能和資源消耗上來(lái)說(shuō)都不是最好的選擇。這里我采用了通過(guò)上下文（也就是CGContextRef）來(lái)繪制這樣的效果，大家對(duì)它應(yīng)該并不陌生，它既可以繪制直線(xiàn)、曲線(xiàn)、多邊形圓形以及各種各樣的幾何圖形。
具體步驟
我們可以將上面的復(fù)雜圖形拆分成如下幾步：
- 繪制最外面的一圈刻度尺
- 繪制表示進(jìn)度的刻度尺
- 繪制中間的球形加載界面
繪制刻度尺
如果你先要在控件中繪制自己想要的圖形，你需要重寫(xiě)UIView的drawRect方法：
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
[self drawScale:context];
}
在drawRect方法中，我們先畫(huà)出了刻度尺的圖形，刻度尺是由一圈短線(xiàn)在一個(gè)圓內(nèi)圍成的一個(gè)圓。
/**
* 畫(huà)比例尺
*
* @param context 全局context
*/
- (void)drawScale:(CGContextRef)context {
CGContextSetLineWidth(context, _scaleDivisionsWidth);//線(xiàn)的寬度
//先將參照點(diǎn)移到控件中心
CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);
//設(shè)置線(xiàn)的顏色
CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.655 green:0.710 blue:0.859 alpha:1.00].CGColor);//線(xiàn)框顏色
//繪制一些圖形
for (int i = 0; i < _scaleCount; i++) {
CGContextMoveToPoint(context, scaleRect.size.width/2 - _scaleDivisionsLength, 0);
CGContextAddLineToPoint(context, scaleRect.size.width/2, 0);
// CGContextScaleCTM(ctx, 0.5, 0.5);
//渲染
CGContextStrokePath(context);
CGContextRotateCTM(context, 2 * M_PI / _scaleCount);
}
//繪制刻度尺外的一個(gè)圈
CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.694 green:0.745 blue:0.867 alpha:1.00].CGColor);//線(xiàn)框顏色
CGContextSetLineWidth(context, 0.5);
CGContextAddArc (context, 0, 0, scaleRect.size.width/2 - _scaleDivisionsLength - 3, 0, M_PI* 2 , 0);
CGContextStrokePath(context);
//復(fù)原參照點(diǎn)
CGContextTranslateCTM(context, -fullRect.size.width / 2, -fullRect.size.width / 2);
}
這里需要用到兩個(gè)東西一個(gè)是CGContextAddArc，一個(gè)是CGContextAddLineToPoint。創(chuàng)建圓弧的方法有兩種一種是CGContextAddArc，一種是CGContextAddArcToPoint，這里畫(huà)的圓比較簡(jiǎn)單所以用的是CGContextAddArc,CGContextAddArcToPoint在后面也會(huì)用到（我會(huì)在用到的地方詳解）。
CGContextAddArc
void CGContextAddArc (
CGContextRef c,
CGFloat x, //圓心的x坐標(biāo)
CGFloat y, //圓心的x坐標(biāo)
CGFloat radius, //圓的半徑
CGFloat startAngle, //開(kāi)始弧度
CGFloat endAngle, //結(jié)束弧度
int clockwise //0表示順時(shí)針，1表示逆時(shí)針
);
這里需要?jiǎng)?chuàng)建一個(gè)完整的圓，那么 開(kāi)始弧度就是0 結(jié)束弧度是 2PI， 因?yàn)閳A周長(zhǎng)是 2PIradius。函數(shù)執(zhí)行完后，current point就被重置為(x,y)。CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);已經(jīng)將current point移動(dòng)到了(fullRect.size.width / 2, fullRect.size.width / 2)。
CGContextAddLineToPoint
void CGContextAddLineToPoint (
CGContextRef c,
CGFloat x,
CGFloat y
);
創(chuàng)建一條直線(xiàn)，從current point到 (x,y)
然后current point會(huì)變成(x,y)。
由于短線(xiàn)不連續(xù)，所以通過(guò)for循環(huán)來(lái)不斷畫(huà)短線(xiàn)，_scaleCount代表的是刻度尺的個(gè)數(shù)，每次循環(huán)先將current point移動(dòng)到(scaleRect.size.width/2 - _scaleDivisionsLength, 0)點(diǎn)，_scaleDivisionsLength代表短線(xiàn)的長(zhǎng)度。繪制完短線(xiàn)后將前面繪制完成的圖形旋轉(zhuǎn)一個(gè)刻度尺的角度CGContextRotateCTM(context, 2 * M_PI / _scaleCount);，將最終的繪制渲染后就得到了如下的刻度尺：
刻度尺上的進(jìn)度繪制
首先在drawRect中添加drawProcessScale方法。
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
[self drawScale:context];
[self drawProcessScale:context];
}
然后在drawProcessScale方法中實(shí)現(xiàn)左右兩部分的刻度尺進(jìn)度繪制。
/**
* 比例尺進(jìn)度
*
* @param context 全局context
*/
- (void)drawProcessScale:(CGContextRef)context {
CGContextSetLineWidth(context, _scaleDivisionsWidth);//線(xiàn)的寬度
CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);
CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.969 green:0.937 blue:0.227 alpha:1.00].CGColor);//線(xiàn)框顏色
int count = (_scaleCount / 2 + 1) * currentPercent;
CGFloat scaleAngle = 2 * M_PI / _scaleCount;
//繪制左邊刻度進(jìn)度
for (int i = 0; i < count; i++) {
CGContextMoveToPoint(context, 0, scaleRect.size.width/2 - _scaleDivisionsLength);
CGContextAddLineToPoint(context, 0, scaleRect.size.width/2);
// CGContextScaleCTM(ctx, 0.5, 0.5);
// 渲染
CGContextStrokePath(context);
CGContextRotateCTM(context, scaleAngle);
}
//繪制右邊刻度進(jìn)度
CGContextRotateCTM(context, -count * scaleAngle);
for (int i = 0; i < count; i++) {
CGContextMoveToPoint(context, 0, scaleRect.size.width/2 - _scaleDivisionsLength);
CGContextAddLineToPoint(context, 0, scaleRect.size.width/2);
// CGContextScaleCTM(ctx, 0.5, 0.5);
// 渲染
CGContextStrokePath(context);
CGContextRotateCTM(context, -scaleAngle);
}
CGContextTranslateCTM(context, -fullRect.size.width / 2, -fullRect.size.width / 2);
}
繪制完后效果如下：
水的波浪效果繪制
終于到了最主要也是最難的效果繪制了，對(duì)于帶有波浪不斷滾動(dòng)的效果是采用NSTimer來(lái)不斷繪制每一幀圖形實(shí)現(xiàn)的，現(xiàn)在簡(jiǎn)單介紹下每一幀的繪制方法。
首先在drawRect中添加drawWave方法，
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
[self drawScale:context];
[self drawProcessScale:context];
[self drawWave:context];
}
drawWave中實(shí)現(xiàn)如下方法：
/**
* 畫(huà)波浪
*
* @param context 全局context
*/
- (void)drawWave:(CGContextRef)context {
CGMutablePathRef frontPath = CGPathCreateMutable();
CGMutablePathRef backPath = CGPathCreateMutable();
//畫(huà)水
CGContextSetLineWidth(context, 1);
CGContextSetFillColorWithColor(context, [_frontWaterColor CGColor]);
CGFloat offset = _scaleMargin + _waveMargin + _scaleDivisionsWidth;
float frontY = currentLinePointY;
float backY = currentLinePointY;
CGFloat radius = waveRect.size.width / 2;
CGPoint frontStartPoint = CGPointMake(offset, currentLinePointY + offset);
CGPoint frontEndPoint = CGPointMake(offset, currentLinePointY + offset);
CGPoint backStartPoint = CGPointMake(offset, currentLinePointY + offset);
CGPoint backEndPoint = CGPointMake(offset, currentLinePointY + offset);
for(float x = 0; x <= waveRect.size.width; x++){
//前浪繪制
frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;
CGFloat frontCircleY = frontY;
if (currentLinePointY < radius) {
frontCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
if (frontY < frontCircleY) {
frontY = frontCircleY;
}
} else if (currentLinePointY > radius) {
frontCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
if (frontY > frontCircleY) {
frontY = frontCircleY;
}
}
if (fabs(0 - x) < 0.001) {
frontStartPoint = CGPointMake(x + offset, frontY + offset);
CGPathMoveToPoint(frontPath, NULL, frontStartPoint.x, frontStartPoint.y);
}
frontEndPoint = CGPointMake(x + offset, frontY + offset);
CGPathAddLineToPoint(frontPath, nil, frontEndPoint.x, frontEndPoint.y);
//后波浪繪制
backY = a * cos( x / 180 * M_PI + 3 * b / M_PI ) * amplitude + currentLinePointY;
CGFloat backCircleY = backY;
if (currentLinePointY < radius) {
backCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
if (backY < backCircleY) {
backY = backCircleY;
}
} else if (currentLinePointY > radius) {
backCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
if (backY > backCircleY) {
backY = backCircleY;
}
}
if (fabs(0 - x) < 0.001) {
backStartPoint = CGPointMake(x + offset, backY + offset);
CGPathMoveToPoint(backPath, NULL, backStartPoint.x, backStartPoint.y);
}
backEndPoint = CGPointMake(x + offset, backY + offset);
CGPathAddLineToPoint(backPath, nil, backEndPoint.x, backEndPoint.y);
}
CGPoint centerPoint = CGPointMake(fullRect.size.width / 2, fullRect.size.height / 2);
//繪制前浪圓弧
CGFloat frontStart = [self calculateRotateDegree:centerPoint point:frontStartPoint];
CGFloat frontEnd = [self calculateRotateDegree:centerPoint point:frontEndPoint];
CGPathAddArc(frontPath, nil, centerPoint.x, centerPoint.y, waveRect.size.width / 2, frontEnd, frontStart, 0);
CGContextAddPath(context, frontPath);
CGContextFillPath(context);
//推入
CGContextSaveGState(context);
CGContextDrawPath(context, kCGPathStroke);
CGPathRelease(frontPath);
//繪制后浪圓弧
CGFloat backStart = [self calculateRotateDegree:centerPoint point:backStartPoint];
CGFloat backEnd = [self calculateRotateDegree:centerPoint point:backEndPoint];
CGPathAddArc(backPath, nil, centerPoint.x, centerPoint.y, waveRect.size.width / 2, backEnd, backStart, 0);
CGContextSetFillColorWithColor(context, [_backWaterColor CGColor]);
CGContextAddPath(context, backPath);
CGContextFillPath(context);
//推入
CGContextSaveGState(context);
CGContextDrawPath(context, kCGPathStroke);
CGPathRelease(backPath);
}
上面的代碼較長(zhǎng)，可能也比較難以理解。下面我將會(huì)對(duì)上述代碼簡(jiǎn)單解讀一下，已前浪為例（前浪和后浪的實(shí)現(xiàn)方式基本一樣，只是兩個(gè)浪正余弦函數(shù)不一樣而已）。兩個(gè)浪都是由一條曲線(xiàn)和和一個(gè)圓弧構(gòu)成的封閉區(qū)間，曲線(xiàn)的x區(qū)間為[0, waveRect.size.width]，y值坐標(biāo)為frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;(currentLinePointY為偏移量)，通過(guò)for循環(huán)自增x，計(jì)算出y的位置來(lái)不斷CGPathAddLineToPoint繪制出一條曲線(xiàn)，這就構(gòu)成了波浪的曲線(xiàn)。然后我們需要根據(jù)波浪曲線(xiàn)的起始點(diǎn)和結(jié)束點(diǎn)以及圓心點(diǎn)(fullRect.size.width / 2, fullRect.size.height / 2)，來(lái)繪制一段封閉的圓弧。
這里就需要用到CGPathAddArc方法；CGPathAddArc方法和CGContextAddArc類(lèi)似。需要先計(jì)算出點(diǎn)波浪的起始點(diǎn)和結(jié)束點(diǎn)分別與圓心之間的夾角。知道兩點(diǎn)計(jì)算夾角的方式如下：
/**
* 根據(jù)圓心點(diǎn)和圓上一個(gè)點(diǎn)計(jì)算角度
*
* @param centerPoint 圓心點(diǎn)
* @param point 圓上的一個(gè)點(diǎn)
*
* @return 角度
*/
- (CGFloat)calculateRotateDegree:(CGPoint)centerPoint point:(CGPoint)point {
CGFloat rotateDegree = asin(fabs(point.y - centerPoint.y) / (sqrt(pow(point.x - centerPoint.x, 2) + pow(point.y - centerPoint.y, 2))));
//如果point縱坐標(biāo)大于原點(diǎn)centerPoint縱坐標(biāo)(在第一和第二象限)
if (point.y > centerPoint.y) {
//第一象限
if (point.x >= centerPoint.x) {
rotateDegree = rotateDegree;
}
//第二象限
else {
rotateDegree = M_PI - rotateDegree;
}
} else //第三和第四象限
{
if (point.x <= centerPoint.x) //第三象限，不做任何處理
{
rotateDegree = M_PI + rotateDegree;
}
else //第四象限
{
rotateDegree = 2 * M_PI - rotateDegree;
}
}
return rotateDegree;
}
波浪繪制的相關(guān)判斷
由于曲線(xiàn)x區(qū)間是[0, waveRect.size.width]，y值是根據(jù)公式frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;計(jì)算出來(lái)的，但是最終構(gòu)成的波浪是一個(gè)球形的，所以對(duì)于計(jì)算出來(lái)的y值坐標(biāo)，我們需要判斷它是否在圓上，如果不在圓上，我們應(yīng)該將它移到圓上。
判斷分為兩種情況：
currentLinePointY<fullRect.size.height / 2
當(dāng)currentLinePointY<fullRect.size.height / 2時(shí)，已知點(diǎn)的坐標(biāo)x，根據(jù)公式y1 = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;算出來(lái)的點(diǎn)位置為(x, y1)，而在圓上點(diǎn)坐標(biāo)為x的點(diǎn)的位置在(x,y2)，如果y1<y2 則最終應(yīng)該放到波浪上的點(diǎn)為 (x,y2)。
currentLinePointY>fullRect.size.height / 2
同理當(dāng)currentLinePointY>fullRect.size.height / 2時(shí)，已知點(diǎn)的坐標(biāo)x，根據(jù)公式y1 = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;算出來(lái)的點(diǎn)位置為(x, y1)，而在圓上點(diǎn)坐標(biāo)為x的點(diǎn)的位置在(x,y2)，如果y1>y2 則最終應(yīng)該放到波浪上的點(diǎn)為 (x,y2)。
其中判斷的代碼如下：
frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;
CGFloat frontCircleY = frontY;
if (currentLinePointY < radius) {
frontCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
if (frontY < frontCircleY) {
frontY = frontCircleY;
}
} else if (currentLinePointY > radius) {
frontCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
if (frontY > frontCircleY) {
frontY = frontCircleY;
}
}
其中當(dāng)currentLinePointY < radius時(shí)，y2=radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
當(dāng)currentLinePointY > radius時(shí)，y2=radius + sqrt(pow(radius, 2) - pow((radius - x), 2))；
這樣就構(gòu)成了一個(gè)如下的效果：
然后通過(guò)Timer不斷的改變a、b的值就得到了我想要的動(dòng)畫(huà)效果。
