【iOS】波浪动画实现

最近项目中用到了一个波浪动画，于是我又重新复习了一遍正弦函数，并简单地封装了一个自定义视图。下面为大家介绍封装自定义视图的过程。

正弦曲线

要想实现波浪动画，我们首先需要绘制出一条正弦曲线。所以第一步需要重写自定义视图的drawRect方法，在drawRect方法里绘制正弦曲线。正弦曲线的公式为：y=Asin(ωx+φ)+k，A为振幅，ω为角速度，φ为初相，k为偏距。

我们可以在0 <= x <= self.bounds.size.width的范围内取x的有限个值，并根据公式y=Asin(ωx+φ)+k算出y的值，来获取正弦曲线上的有限个点，并连接各个点，形成正弦曲线。因此这里我们利用CGPathCreateMutable创建了一条可变路径，并依次连接上述各点，形成了一条正弦曲线。代码如下：

- (void)drawRect:(CGRect)rect
{
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //初始化运动路径
    CGMutablePathRef path = CGPathCreateMutable();
    //设置起始位置
    CGPathMoveToPoint(path, nil, 0, self.bounds.size.height);
    //正弦曲线公式为：y=Asin(ωx+φ)+k;
    for (CGFloat x = 0.0f; x <= self.bounds.size.width; x++) {
        CGFloat y = self.alpha * sinf(self.omega * x + self.phi) + self.kappa;
        CGPathAddLineToPoint(path, nil, x, y);
    }
    CGPathAddLineToPoint(path, nil, self.bounds.size.width, self.bounds.size.height);
    CGPathCloseSubpath(path);
    //绘制曲线
    CGContextSetFillColorWithColor(cxt, [UIColor orangeColor].CGColor);
    CGContextSetLineWidth(cxt, 0.5);
    CGContextAddPath(cxt, path);
    CGContextFillPath(cxt);
    CGPathRelease(path);
    
}

波浪效果

正弦曲线画好之后，第二步就是让曲线动起来，形成波浪的效果。所以我们需要创建定时器，让曲线不停地向左或向右移动起来。想移动波形向左或者向右，那么应该是先化为这个形式的式子y=Asin[ω(x+φ/ω)]，如果想向右移动m角度，就变为y=Asin[ω(x+φ/ω-m)]，反之，向左移动的话变为y=Asin[ω(x+φ/ω+m)]。这里我们采取向右移动，因此每次都要在原来初相的基础上减去ω*m，代码如下：

- (void)handleDisplay
{
    if (!self.isHidden) {
        self.phi -= self.speed * self.omega;
        [self setNeedsDisplay];
    }
}

总结
以上为封装自定义视图的整体思路，希望可以帮到大家，需要下载Demo的可以前往我的github：Github地址

最后编辑于：2018.01.13 18:41:22