iOS绘图 - UIBezierPath水波

上一篇文章已经对UIBezierPath的头文件做了详细的了解，本篇就使用UIBezierPath绘制一个简单的图形，别在意出来的外观，尽管动手试试吧。

先附上之前写的一个Demo的效果图，有需要的可以单击666^_：

waterWave.gif

获取本篇DEMO代码

下面就开始使用UIBezierPath简单实现上图的效果：

原理

正弦函数：y = asin(wx+φ) + k

为了方便介绍，我们设定视图高用viewHeight代替，视图宽用viewWidth代替,进度设置为progress

• a:振幅,可以理解为波浪的高度，在demo中我们设置 a = viewHeight/20
• w:决定周期， 2π/w就是一个周期的宽度，在demo中我们设置一个周期是视图宽的 0.9，则可以计算出 w = 2π/(viewWidth*0.9)
• φ:决定水平方向的偏移，在demo中通过不断改变φ值使其产生水平波动的效果,初始相位就设置为 0
• k:决定竖直方向的偏移，根据我们设置的progress计算，这里我想得到的是进度0时没有波纹，进度1时完全填充，所以函数的总偏移量是 viewHeight + 2 * a，根据进度得到的偏移就是(1-progress)(viewHeight + 2a)

还有一点需要注意的就是UIKit中的坐标y轴是向下延伸的

根据上边的原理我们大概就能确定水波的函数：

y = viewHeight/20  *  sin(2π/(viewWidth*0.9) * x + φ) + (1-progress)*(viewHeight + 2*a)

了解了函数之后就是如果将曲线画在视图上，这里我们利用for循环改变x的值得到正弦函数上的每个point，再使用addLineToPoint (当然需要先指定起始点moveToPoint)，即可得到一个正弦波。

如何让正弦波动起来，已经知道就是去改变φ值，这里你应该会想到NSTimer，但是NSTimer可能会造成动画的卡顿现象，这里我们选用CADisplayLink来实现即动画效果。（CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器，适合用于界面重绘）

到这里我们基本上就将项目中的一大部分问题解决了，下面就上代码：

绘制方法都在drawRect中完成

- (void)drawWave {
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    
    for (CGFloat x = 0.0; x <= viewWidth; x ++) {
        CGFloat y = a*sin(w*x + φ) + (1-_progress)*(viewHeight + 2*a);
        if (x == 0) {
            //起始点
            [path moveToPoint:CGPointMake(x, y - a)];
        } else {
            [path addLineToPoint:CGPointMake(x, y - a)];
        }
    }
    //闭合path
    [path addLineToPoint:CGPointMake(viewWidth, viewHeight)];
    [path addLineToPoint:CGPointMake(0, viewHeight)];
    [path closePath];
    
    [[UIColor redColor] setFill];
    [path fill];
}

利用CADisplayLink改变φ

        displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(waveAnimation)];
        [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

- (void)waveAnimation {
    φ += speed;
    [self setNeedsDisplay];
}

到这里，我们的动画效果就基本实现，下边我们继续使用UIBezierPath的其他属性和方法，结合上边的波纹实现一个五角星容器中的波纹效果：

star1.png

现在这里交代一个计算中需要用到的关系：

• 五角星的每个顶角的角度是 2π/10
• 五角星每个顶角与圆心连线的夹角 2π/5
• 上图大圆和小圆的半径关系是 R * sin(2π/20) = r * cos(2π/10);

绘制五角星

- (void)drawStar {
    UIBezierPath *star = [UIBezierPath bezierPath];
    //确定中心点
    CGPoint centerPoint = CGPointMake(viewWidth/2, viewWidth/2);
    //确定半径
    CGFloat bigRadius = viewWidth/2;
    CGFloat smallRadius = bigRadius * sin(2*M_PI/20) / cos(2*M_PI/10);
    //起始点
    CGPoint start=CGPointMake(viewWidth/2, 0);
    [star moveToPoint:start];
    

    //五角星每个顶角与圆心连线的夹角 2π/5，
    CGFloat angle=2*M_PI/5.0;
    for (int i=1; i<=10; i++) {
        CGFloat x;
        CGFloat y;
        NSInteger c = i/2;
        if (i%2 == 0) {
            x=centerPoint.x-sinf(c*angle)*bigRadius;
            y=centerPoint.y-cosf(c*angle)*bigRadius;
        } else {
            x=centerPoint.x-sinf(c*angle + angle/2)*smallRadius;
            y=centerPoint.y-cosf(c*angle + angle/2)*smallRadius;
        }
        [star addLineToPoint:CGPointMake(x, y)];
    }
    
    //连接点
    star.lineJoinStyle = kCGLineJoinRound;
    //虚线
    CGFloat pattern[] = {2.0,2.0};
    [star setLineDash:pattern count:2 phase:0];
    //填充颜色
    [[UIColor lightGrayColor] setFill];
    [star fill];
    //描边颜色
    [[UIColor redColor] setStroke];
    [star stroke];
    //剪切当前画布区域，之后的绘图都在该区域中进行
    [star addClip];
}

效果图

star.gif

下一篇 - UIImage的一些简单操作