chenzhao

  • java
  • iOS
  • IT
知识积累
不积跬步无以至千里
  1. 首页
  2. iOS
  3. 正文

各种进度提示layer 动画

2017年 6月 6日 73点热度 0人点赞 0条评论

From: http://www.code4app.com/blog-822721-738.html

初步学习了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];


    
    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];


    
    [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];

    }];
}

使用正余弦做的注水动画

在使用正余弦做注水动画时,先了解下正余弦

我们要做的 就是使用两条正余弦,但是这两条正余弦, 波峰需要对应波谷,有两种方法:

  1. 使用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);
    
    CGFloat y = _waveY;

    
    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;

 

 

来自:https://github.com/liuxinixn/ProgressViewDemo

标签: 暂无
最后更新:2022年 11月 11日

陈昭

IT 程序员

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2022 chenzhao. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang