首页 > 代码库 > iOS学习:CAShapeLayer与UIBezierPath动画

iOS学习:CAShapeLayer与UIBezierPath动画

CAShapeLayer与UIBezierPath动画:

CAShapeLayer与UIBezierPath的动画,就离不开 CABasicAnimation;也将会使用到 strokeEnd、strokeStart、lineWidth 三个属性:

先做一条贝塞尔曲线:

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(40, 80)];
    [path addCurveToPoint:CGPointMake(280, 80)
            controlPoint1:CGPointMake(120, 40)
            controlPoint2:CGPointMake(200, 120)];
    
    _animLayer = [CAShapeLayer layer];
    _animLayer.path = path.CGPath;
    _animLayer.lineWidth = 2.f;
    _animLayer.strokeColor = [UIColor blackColor].CGColor;
    _animLayer.fillColor = [UIColor clearColor].CGColor;
    
    [self.view.layer addSublayer:_animLayer];
  • strokeEnd:技术分享

    self.animLayer.strokeStart = 0.f;   // 设置起点为 0
    self.animLayer.strokeEnd = 0.f;     // 设置终点为 0
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持续时间
    animation.fromValue = http://www.mamicode.com/@(0); // 从 0 开始""];

  注意:当曲线给了填充色后,填充色是不参与动画的。技术分享

    self.animLayer.fillColor = [UIColor grayColor].CGColor;

  

  • strokeStart & strokeEnd:技术分享

    self.animLayer.strokeStart = 0.5;
    self.animLayer.strokeEnd = 0.5;
    CABasicAnimation *animationStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animationStart.fromValue = http://www.mamicode.com/@(0.5);"strokeEnd"];
    animationEnd.fromValue = http://www.mamicode.com/@(0.5);""];
  • lineWidth:技术分享

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
    animation.fromValue = http://www.mamicode.com/@(2);""];
  • 圆形指示器:技术分享

- (void)viewDidLoad {
    [super viewDidLoad]; 
   
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(40, 40, 100, 100)];
    _circleLayer = [CAShapeLayer layer];
    _circleLayer.path = path.CGPath;
    _circleLayer.lineWidth = 2.f;
    _circleLayer.strokeColor = [UIColor redColor].CGColor;
    _circleLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:_circleLayer];
}

- (void)circleAnimation {
    self.circleLayer.strokeStart = 0.f;
    self.circleLayer.strokeEnd = 0.f;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持续时间
    animation.fromValue = http://www.mamicode.com/@(0); // 从 0 开始""];
}

  

 

iOS学习:CAShapeLayer与UIBezierPath动画