CAShapeLayer與UIBezierPath實現注水動畫與正余弦水波紋動畫

JanJVLN 7年前發布 | 13K 次閱讀 X++ iOS開發移動開發

初步學習了CoreAnimation框架，總結了幾個動畫效果，主要是通過CAShapeLayer與貝塞爾曲線實現。先看下效果

1.gif

扇形下載進度

要實現扇形的下載進度，有兩種方法，這里先使用第一種：

1.使用設置UIBezierPath的角度

2.使用 CAShapeLayer的stokeEnd屬性

//設置中心點
    CGPoint point = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

    //起點位置
    CGFloat startAngle = - M_PI /2;

    //結束位置
    CGFloat endAngle = self.progress *M_PI *2 + startAngle;


    UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:point radius:self.bounds.size.width/2 startAngle:startAngle endAngle:endAngle clockwise:1];

     //畫一根到 圓心的線
    [path addLineToPoint:point];


    //通過layer繪制
    CAShapeLayer *layer =[CAShapeLayer layer];


    layer.path = path.CGPath;

    layer.fillColor =[UIColor colorWithRed:0.47 green:0.83 blue:0.98 alpha:1].CGColor;

    [self.layer addSublayer:layer];

圓形進度

首先 我們需要一個背景層 一個前景層，一個路徑供給兩個layer使用。這里我們使用改變stokeEnd 來改變圓弧的進度，代碼里增加了一點漸變
   self.backLayer =[CAShapeLayer layer];
    self.backLayer.fillColor  =[UIColor clearColor].CGColor;
    self.backLayer.frame = self.bounds;
    self.backLayer.lineWidth = 4;
    self.backLayer.strokeColor =[UIColor lightGrayColor].CGColor;
    [self.layer addSublayer:self.backLayer];

    self.foreLayer =[CAShapeLayer layer];
    self.foreLayer.fillColor  =[UIColor clearColor].CGColor;
    self.foreLayer.frame = self.bounds;
    self.foreLayer.strokeColor =[UIColor redColor].CGColor;
    self.foreLayer.lineWidth = 4;
    [self.layer addSublayer:self.foreLayer];


    UIBezierPath *path=  [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:self.bounds.size.width/2-2 startAngle:-M_PI_2 endAngle:M_PI *1.5 clockwise:YES];
    self.backPath = path;

    self.backLayer.path = self.backPath.CGPath;
    self.foreLayer.path = self.backPath.CGPath;
    self.foreLayer.strokeEnd = 0;


    self.gradientLayerLeft =[CAGradientLayer layer];
    self.gradientLayerLeft.frame = self.bounds;

    self.gradientLayerLeft.colors =@[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor blueColor].CGColor];
    self.gradientLayerLeft.locations = @[@0,@0.5,@1];
    self.gradientLayerLeft.startPoint = CGPointMake(0, 0);
    self.gradientLayerLeft.endPoint = CGPointMake(0, 1);
    [self.layer addSublayer:self.gradientLayerLeft];


    //設置mask
    [self.gradientLayerLeft setMask:self.foreLayer];
-(void)setProgressValue:(CGFloat)progressValue
{
    _progressValue = progressValue;
    self.foreLayer.strokeEnd = progressValue;
    self.label.text = [NSString stringWithFormat:@"%.f%%",progressValue *100];
}

一個加載動畫

引自：旋轉加載動畫

可以重點學習下做動畫的思路，

//核心代碼 在動畫開始的時候做一些平移旋轉
- (void)animationDidStart:(CAAnimation *)anim{
    [UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState animations:^{

        self.ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);
        self.ball_1.transform = CGAffineTransformScale(self.ball_1.transform, 0.7, 0.7);

        self.ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);
        self.ball_3.transform = CGAffineTransformScale(self.ball_3.transform, 0.7, 0.7);


        self.ball_2.transform = CGAffineTransformScale(self.ball_2.transform, 0.7, 0.7);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseIn  | UIViewAnimationOptionBeginFromCurrentState animations:^{
            self.ball_1.transform = CGAffineTransformIdentity;
            self.ball_3.transform = CGAffineTransformIdentity;
            self.ball_2.transform = CGAffineTransformIdentity;
        } completion:NULL];

    }];
}

使用正余弦做的注水動畫

在使用正余弦做注水動畫時，先了解下正余弦

/**
 正弦曲線公式可表示為y=Asin(ωx+φ)+k：
 A，振幅，最高和最低的距離
 W，角速度，用于控制周期大小，單位x中的起伏個數
 K，偏距，曲線整體上下偏移量
 φ，初相，左右移動的值

 這個效果主要的思路是添加兩條曲線 一條正玄曲線、一條余弦曲線 然后在曲線下添加深淺不同的背景顏色，從而達到波浪顯示的效果
 */

我們要做的就是使用兩條正余弦，但是這兩條正余弦，波峰需要對應波谷，有兩種方法：

使用for循環分別拼接正余弦的路徑

-(void)updateWave
{
    //波浪寬度
    CGFloat waterWaveWidth = self.bounds.size.width;
    //初始化運動路徑
    CGMutablePathRef path = CGPathCreateMutable();

    CGMutablePathRef maskPath = CGPathCreateMutable();
    //設置起始位置
    CGPathMoveToPoint(path, nil, 0, _waveY);

    //設置起始位置
    CGPathMoveToPoint(maskPath, nil, 0, _waveY);
    //初始化波浪其實Y為偏距
    CGFloat y = _waveY;

    //正弦曲線公式為： y=Asin(ωx+φ)+k;
    for (float x = 0.0f; x <= waterWaveWidth ; x++) {
        y = _waveAmplitude * sin(_wavePalstance * x + _waveX) + _waveY;

        CGPathAddLineToPoint(path, nil, x, y);

    }
    for (float x = 0.0f; x <= waterWaveWidth ; x++) {
        y = _waveAmplitude * cos(_wavePalstance * x + _waveX) + _waveY;

        CGPathAddLineToPoint(maskPath, nil, x, y);
    }
    [self updateLayer:_waveLayer1 path:path];
    [self updateLayer:_waveLayer2 path:maskPath];

}
-(void)updateLayer:(CAShapeLayer *)layer path:(CGMutablePathRef )path
{
    //填充底部顏色
    CGFloat waterWaveWidth = self.bounds.size.width;
    CGPathAddLineToPoint(path, nil, waterWaveWidth, self.bounds.size.height);
    CGPathAddLineToPoint(path, nil, 0, self.bounds.size.height);
    CGPathCloseSubpath(path);
    layer.path = path;
     CGPathRelease(path);
}

2.使用單個for循環只是設置另一條曲線的y值相反即可實現兩條正余弦的效果，最后一個動畫中會有說明

for (int x = 0; x<WIDTH; x++) {
        y = waveHeight*sinf(0.01*waveCurvature*x+offSetValue*0.045);
        CGPathAddLineToPoint(path, nil, x, y);
        //遮罩層的路徑與之相反
        masky = -y;
        CGPathAddLineToPoint(maskPath, nil, x, masky);
    }

但是我們有個需求就是改變波浪的高度，實現注水的百分比，就需要設置波浪的偏距

-(void)updateWaveY
{
    CGFloat targetY = self.bounds.size.height - _progress * self.bounds.size.height;
    if (_waveY < targetY) {
        _waveY += 2;
    }
    if (_waveY > targetY ) {
        _waveY -= 2;
    }
}

正余弦動畫2

如果有個需求，比如一個小船隨著波浪的波動而起伏

那我們就需要計算波浪的位置，然后設置小船的frame

//這里使用創建正余弦的第二種方法
    for (int x = 0; x<WIDTH; x++) {
        y = waveHeight*sinf(0.01*waveCurvature*x+offSetValue*0.045);
        CGPathAddLineToPoint(path, nil, x, y);
        //遮罩層的路徑與之相反
        masky = -y;
        CGPathAddLineToPoint(maskPath, nil, x, masky);
    }
計算出實浪波動時，最中間的位置，設置小船的frame
  CGFloat CentY = waveHeight*sinf(0.01*waveCurvature*WIDTH/2+offSetValue*0.045);
    CGRect boardViewFrame = [boardView frame];
    boardViewFrame.origin.y = 100-waveHeight+CentY;
    boardView.frame = boardViewFrame;

來自：http://www.jianshu.com/p/16fd028ee636

本文由用戶 JanJVLN 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1483411751748.html

X++ iOS開發移動開發

CAShapeLayer與UIBezierPath實現注水動畫與正余弦水波紋動畫

相關經驗

相關資訊

相關文檔

目錄