iosobjective-ccaanimationcakeyframeanimation

CAKeyframeAnimation animation starts without the first frame(path)


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:

Bezier1

Bezier2

Bezier3

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!


Solution

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