ios - CAKeyframeAnimation动画开始没有第一帧(路径)

Question

我想用不同的贝塞尔曲线形状为蒙版制作动画。我的动画开始了，但我看不到第一条路径。代码如下:

- (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];
}

然后我创建我的蒙版层，但在触摸的位置。如何获取接触点:

- (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];
}

触摸点的贝塞尔图层:

- (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];
}

接下来是bezier1到bezier3的图片:

mask(bezier)层的动画:

- (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"];
}

正如我之前提到的，动画从 object2 开始。所以，也许这只是一个简单的错误，但我看不到。

谢谢!

Answer 1

问题是您的 keyTimes 数组中的第二个值。由于分母和分母都是整数，所以结果为零。你应该像这样强制进行浮点除法:

frameA.keyTimes = @[@0.0, @(1.0/3.0), @1.0];