绘图相关小Demo

扇形进度指示器

- (void)circleWithprogress:(float)progress {
    UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 0, 100, 20)];
    slider.center = CGPointMake(self.center.x, self.center.y+100);
    [self addSubview:slider];
    slider.minimumValue = 0;
    slider.maximumValue = 1;
    slider.value =0;
    slider.continuous= YES;
    [slider addTarget:self action:@selector(changeValue:) forControlEvents:UIControlEventValueChanged];
    
    CGRect rect = CGRectMake(0, 0, 100, 100);
    UIBezierPath * rectP = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:5];
    UIBezierPath * circleP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 80, 80)];
    [rectP appendPath:circleP];
    CAShapeLayer * layer = [CAShapeLayer layer];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.position = self.center;
    layer.path = rectP.CGPath;
    layer.fillColor = [UIColor colorWithWhite:0 alpha:0.5].CGColor;
    layer.fillRule = kCAFillRuleEvenOdd;
    [self.layer addSublayer:layer];
 
}
- (void)drawRect:(CGRect)rect {
    CGFloat startAngle = - M_PI_2;
    CGFloat endAngle = startAngle + self.progress * M_PI * 2;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:40 startAngle:startAngle endAngle:endAngle clockwise:YES];
    [path addLineToPoint:self.center];
    [[UIColor greenColor] set];
    [path fill];
}
- (void)changeValue:(id)sender {
    UISlider *slider = (UISlider *)sender;
    self.progress = slider.value;
    [self setNeedsDisplay];
}

扇形进度条

SimpleProgress

   CALayer *greenlayer =[CALayer layer];
    greenlayer.frame =CGRectMake(0, 0, 200, 50);
    greenlayer.position = self.view.center;
    greenlayer.backgroundColor = [UIColor greenColor].CGColor;
    [self.view.layer addSublayer:greenlayer];
    progressRedlayer = [CAShapeLayer layer];
    progressRedlayer.frame = greenlayer.bounds;
    progressRedlayer.strokeStart = 0;
    progressRedlayer.strokeEnd = 0;
    progressRedlayer.fillColor = [UIColor clearColor].CGColor;
    progressRedlayer.lineWidth = 50;
    progressRedlayer.strokeColor = [UIColor redColor].CGColor;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(greenlayer.frame.origin.x, greenlayer.frame.origin.y+25)];
    [path addLineToPoint:CGPointMake(greenlayer.frame.origin.x+200, greenlayer.frame.origin.y+25)];
    progressRedlayer.path = path.CGPath;
    [self.view.layer addSublayer:progressRedlayer];
#if 0
    UISlider *slider1 = [[UISlider alloc]initWithFrame:CGRectMake(0, 0, 200, 30)];
    slider1.center = CGPointMake(self.view.center.x, self.view.center.y+100);
    [self.view addSubview:slider1];
    slider1.minimumValue = 0;
    slider1.maximumValue = 1;
    slider1.value =0;
    slider1.continuous= YES;//设置可连续变化
    [slider1 addTarget:self action:@selector(changeValue1:) forControlEvents:UIControlEventValueChanged];
#else
    [progressRedlayer addAnimation:[self createSimpleProgress] forKey:@"strokeEndAnimation"];
#endif

StrokeEnd1
StrokeEnd2

优酷播放按钮

步骤

1. 绘制圆弧，绘制竖线，绘制三角
2. 竖线圆弧添加strokeEnd动画
3. 三角添加opacity动画
4. 整体添加transform.rotation动画

透明动画
    CABasicAnimation *alphaAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAni.fromValue = @(fromValue);
    alphaAni.toValue   = @(toValue);
    alphaAni.duration  = duration;
    alphaAni.fillMode = kCAFillModeForwards;
    alphaAni.removedOnCompletion = NO;
    [layer addAnimation:alphaAni forKey:animationName];
strokeEnd动画
    CABasicAnimation *strokeEndAni = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAni.duration = duration;
    strokeEndAni.fromValue = @(fromValue);
    strokeEndAni.toValue   = @(toValue);
    strokeEndAni.fillMode = kCAFillModeForwards;
    strokeEndAni.removedOnCompletion = NO;
    [layer addAnimation:strokeEndAni forKey:animationName];
旋转动画
    CABasicAnimation *rotateAni = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotateAni.duration = duration;
    rotateAni.fromValue = @(startAngle);
    rotateAni.toValue   = @(endAngle);
    rotateAni.fillMode = kCAFillModeForwards;
    rotateAni.removedOnCompletion = NO;
    [self.layer addAnimation:rotateAni forKey:@"Rotate_Layer"];

优酷