UIBezierPath动画下的渐变

Question

我需要 iOS

核心动画方面的帮助

我有以下看法

我需要从左到右设置曲线外观的动画。这一步是由 animationWithKeyPath:@"strokeEnd" 完成的，它有效并且一切正常。

我还需要为曲线下的渐变外观设置动画，它随着曲线外观从左到右移动

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

我怎样才能做到这一点？

我拥有的图层和路径：

(1)渐变曲线线——uishapelayer 彩色渐变 - 具有 (1) 作为遮罩的 cagradient 层

(2) closed path layer - 沿 (1) 曲线的路径，但带有 [path closePath]；灰色渐变 - 具有 (2) 作为遮罩的 cagradient

(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% 真实地观看视频，我注意到的另一个问题是您的渐变需要沿着图表的趋势倾斜 - 注意他们的图表趋势向上，并且渐变角度匹配。

UIBezierPath动画下的渐变

gradient under UIBezierPath animation

animation

core-animation

core-graphics

objective-c

ios