UIBezierPath 动画下的渐变

Question

我需要有关 iOS 核心动画的帮助

我有以下看法

我需要从左到右为曲线外观设置动画。这一步是由animationWithKeyPath:@"strokeEnd" 完成的，它工作正常，一切都很好。

我还需要对曲线下的渐变外观进行动画处理，随着曲线外观从左到右

这是我需要达到的外观的参考视频剪辑

我怎样才能做到这一点？

我拥有的图层和路径：

(1)渐变曲线-uishapelayer 彩色渐变 - 具有 (1) 作为掩码的渐变层

(2) 闭合路径层 - 沿着 (1) 曲线的路径，但带有 [path closePath]； 灰度梯度 - 以 (2) 作为掩码的梯度

(3) animationLayer - 层，添加为 [self.layer addSublayer:animationLayer] (3) 有彩色渐变和灰度渐变作为子层

initWithFrame:

    _animationLayer = [CALayer new];
    _animationLayer.frame = frame;
    _animationLayer.masksToBounds = YES;
    [self.layer addSublayer:_animationLayer];

    _path = [self characteristicsGraph:frame];

    _pathLayer = [CAShapeLayer new];
    _pathLayer.frame = frame;
    _pathLayer.path = _path.CGPath;
    _pathLayer.strokeColor = [color CGColor];
    _pathLayer.fillColor = nil;
    _pathLayer.lineWidth = lineW;


    _fillPathLayer = [CAShapeLayer new];
    _fillPathLayer.frame = frame;
    _fillPathLayer.path = [self closePath:_path].CGPath;
    _fillPathLayer.strokeColor = [color CGColor];
    _fillPathLayer.fillColor = [color CGColor];
    _fillPathLayer.masksToBounds = YES;


    _fillGradient = [self gradient:frame];
    _fillGradient.frame = frame;
    _fillGradient.mask = _fillPathLayer;

    _lineGradient = [self lineGradient:frame];
    _lineGradient.frame = frame;
    _lineGradient.mask = _pathLayer;

    [_animationLayer addSublayer:_fillGradient];
    [_animationLayer addSublayer:_lineGradient];

pathLayer 动画（动画彩色渐变外观）：

self.currentAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
self.currentAnimation.fromValue = @(0);
self.currentAnimation.toValue = @(1);
self.currentAnimation.duration = .5;
[self.pathLayer addAnimation:self.currentAnimation forKey:animationKey];

灰色渐变是静态的，不能设置动画。 将不胜感激帮助

Answer 1

您可以为渐变图层制作一个遮罩层 - 只需将其设为一个矩形，该矩形会随着线条的动画而扩展。

如果你想 100% 忠实于视频，我注意到的另一个问题是你的渐变需要沿着图表的趋势倾斜 - 注意他们的图表趋势向上，并且渐变角度匹配。