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