最近項目中用到了一個波浪動畫，于是我又重新復習了一遍正弦函數(shù)，并簡單地封裝了一個自定義視圖。下面為大家介紹封裝自定義視圖的過程。

正弦曲線

要想實現(xiàn)波浪動畫，我們首先需要繪制出一條正弦曲線。所以第一步需要重寫自定義視圖的drawRect方法，在drawRect方法里繪制正弦曲線。正弦曲線的公式為：y=Asin(ωx+φ)+k，A為振幅，ω為角速度，φ為初相，k為偏距。

我們可以在0 <= x <= self.bounds.size.width的范圍內取x的有限個值，并根據(jù)公式y(tǒng)=Asin(ωx+φ)+k算出y的值，來獲取正弦曲線上的有限個點，并連接各個點，形成正弦曲線。因此這里我們利用CGPathCreateMutable創(chuàng)建了一條可變路徑，并依次連接上述各點，形成了一條正弦曲線。代碼如下：

- (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);
    
}

波浪效果

正弦曲線畫好之后，第二步就是讓曲線動起來，形成波浪的效果。所以我們需要創(chuàng)建定時器，讓曲線不停地向左或向右移動起來。想移動波形向左或者向右，那么應該是先化為這個形式的式子y=Asin[ω(x+φ/ω)]，如果想向右移動m角度，就變?yōu)閥=Asin[ω(x+φ/ω-m)]，反之，向左移動的話變?yōu)閥=Asin[ω(x+φ/ω+m)]。這里我們采取向右移動，因此每次都要在原來初相的基礎上減去ω*m，代碼如下：

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

總結
以上為封裝自定義視圖的整體思路，希望可以幫到大家，需要下載Demo的可以前往我的github：Github地址