iphoneioscore-animationcgpathcashapelayer

How to animate CAShapeLayer path and fillColor


How to animate CAShapeLayer path and fillColor?

How to animate strokeEnd to show the path being drawn? and how to animate fillColor?


Solution

  • To animate path

      //setup the CAShapeLayer
    myShapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    myShapeLayer.lineWidth = 5;
    myShapeLayer.fillColor = [[UIColor yellowColor] CGColor];
    
    
    
    //Display it!
    [self.view.layer addSublayer:myShapeLayer];
    
    //Animate path
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.5f;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnimation.repeatCount = 10;
    pathAnimation.autoreverses = YES;
    [myShapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
    
    //Animate colorFill
    CABasicAnimation *fillColorAnimation = [CABasicAnimation animationWithKeyPath:@"fillColor"];
    fillColorAnimation.duration = 1.5f;
    fillColorAnimation.fromValue = (id)[[UIColor clearColor] CGColor];
    fillColorAnimation.toValue = (id)[[UIColor yellowColor] CGColor];
    fillColorAnimation.repeatCount = 10;
    fillColorAnimation.autoreverses = YES;
    [myShapeLayer addAnimation:fillColorAnimation forKey:@"fillColor"];
    

    I hope this helps :)

    2021 Update

    Swift

        myShapeLayer.strokeColor = UIColor.blue.cgColor
    myShapeLayer.lineWidth = 5
    myShapeLayer.fillColor = UIColor.yellow.cgColor
    
    //Display it!
    view.layer.addSublayer(myShapeLayer)
    
    //Animate path
    let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
    pathAnimation.duration = 1.5
    pathAnimation.fromValue = NSNumber(value: 0.0)
    pathAnimation.toValue = NSNumber(value: 1.0)
    pathAnimation.repeatCount = 10
    pathAnimation.autoreverses = true
    myShapeLayer.add(pathAnimation, forKey: "strokeEnd")
    
    
    //Animate colorFill
    let fillColorAnimation = CABasicAnimation(keyPath: "fillColor")
    fillColorAnimation.duration = 1.5
    fillColorAnimation.fromValue = UIColor.clear.cgColor
    fillColorAnimation.toValue = UIColor.yellow.cgColor
    fillColorAnimation.repeatCount = 10
    fillColorAnimation.autoreverses = true
    myShapeLayer.add(fillColorAnimation, forKey: "fillColor")