UIBezierPath脉冲动画

Question

我在UIScrollView上画了一个UIBezierPath我做了一个动画，画出了从开始到结束点的路径，但这不是我想要的动画。

UIBezierPath *linePath = [UIBezierPath bezierPath]; 
    [linePath moveToPoint:startPoints]; 
    [linePath addLineToPoint:endPoints; 


    //shape layer for the line 
    CAShapeLayer *line = [CAShapeLayer layer]; 
    line.path = [linePath CGPath]; 
    // line.fillColor = [[UIColor blackColor] CGColor]; 
    line.strokeColor = [[colors objectAtIndex:i] CGColor]; 
    line.lineWidth = 5; 
    // line.contents = (id)[[UIImage imageNamed:@"Mask.png"] CGImage]; 
    // line.contentsGravity = kCAGravityCenter; 



    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    pathAnimation.duration = 3.0; 
    pathAnimation.fromValue = @(0.0f); 
    pathAnimation.toValue = @(1.0f); 
    pathAnimation.repeatCount = HUGE_VAL; 
    [line addAnimation:pathAnimation forKey:@"strokeEnd"]; 

我曾尝试添加一个contents的形状图层，但我不擅长动画。我想实现的效果与“滑动解锁”具有相同的动画，或者是一个脉冲路径。

我试图做同样的事情从slide-to-unlock答案，但似乎无法管理

Answer 1

我结束了dooing这样的：

UIBezierPath *linePath = [UIBezierPath bezierPath]; 
[linePath moveToPoint:startPoints]; 
[linePath addLineToPoint:endPoints]; 

//gradient layer for the line 


CAGradientLayer *gradient = [CAGradientLayer layer]; 
gradient.frame = CGRectMake(0, 0, 150.0, 1.0); 
gradient.cornerRadius = 5.0f; 
gradient.startPoint = CGPointMake(0.0, 0.5); 
gradient.endPoint = CGPointMake(1.0, 0.5); 
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor],(id)[[UIColor whiteColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor clearColor] CGColor], nil]; 
[scrollViewContent.layer addSublayer:gradient]; 



CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
anim.path = [linePath CGPath]; 
anim.rotationMode = kCAAnimationRotateAuto; 
anim.repeatCount = 0; 
anim.duration = 1; 
[gradient addAnimation:anim forKey:@"gradient"];