CAKeyframeAnimation animation starts without the first frame(path) - ios

Question

I want to animate the mask with different bezier shapes. My animation starts but I cannot see the first path. The code is below:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_shapeLayer = [CAShapeLayer layer];
[self drawParentLayer];
}
- (void)drawParentLayer {
_shapeLayer.frame = CGRectMake(0, 0, 350, 500);
_shapeLayer.lineWidth = 3;
_shapeLayer.strokeColor = [UIColor blackColor].CGColor;
_shapeLayer.fillColor = UIColor.whiteColor.CGColor;
_shapeLayer.path = [UIBezierPath bezierPathWithRect:_shapeLayer.bounds].CGPath;
_shapeLayer.masksToBounds = NO;
[self.view.layer addSublayer:_shapeLayer];
}
Then I create my mask layer but in the location of touch.
How to get touch point:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
CGPoint locationInLayer = CGPointMake(location.x - _shapeLayer.frame.origin.x, location.y - _shapeLayer.frame.origin.y);
_shapeLayer.fillColor = UIColor.yellowColor.CGColor;
[self createBezierLayerInPoint:locationInLayer];
}
Bezier layer in point of touch:
- (void)createBezierLayerInPoint:(CGPoint)point {
CAShapeLayer *layer = [CAShapeLayer layer];
layer.fillColor = UIColor.whiteColor.CGColor;
layer.shadowColor = [[UIColor whiteColor] CGColor];
layer.shadowOffset = CGSizeMake(0.0, 0.0);
layer.shadowOpacity = 0.8;
layer.shadowRadius = 20.0;
layer.lineWidth = 0;
UIBezierPath *bezier = [BezierObject createBezierObject1];
layer.bounds = bezier.bounds;
layer.path = bezier.CGPath;
layer.position = point;
// my bezier objects are big so I decided to scale
layer.transform = CATransform3DMakeScale(0.2, 0.2, 1);
_shapeLayer.mask = layer;
[self animate:layer];
}
The pictures from bezier1 to bezier3 are next:
Animation of mask(bezier) layer:
- (void)animate:(CAShapeLayer *)layer {
CAKeyframeAnimation *frameA = [CAKeyframeAnimation animation];
[frameA setKeyPath:#"path"];
frameA.values = #[(id)[BezierObject createBezierObject1].CGPath, (id)[BezierObject createBezierObject2].CGPath, (id)[BezierObject createBezierObject3].CGPath];
frameA.keyTimes = #[#0, #(1/3), #1];
frameA.additive = YES;
frameA.removedOnCompletion = NO;
frameA.fillMode = kCAFillModeForwards;
frameA.duration = 3;
[layer addAnimation:frameA forKey:#"path"];
}
As I mentioned before animation starts from the object2. So, maybe it's just simple mistake but I can't see it.
Thank you!

Answer 1

The problem is the second value in your keyTimes array. Since nominator and denominator are integers, the result is zero. You should force a floating point division like this:
frameA.keyTimes = #[#0.0, #(1.0/3.0), #1.0];