Change speed of "marching ants" effect after every 10 seconds

209 Views Asked by At

I'd like to change the Speed of my "Marching ants" effect after it has looped every 10 times. So it's looping the animation with a duration of 1, after the 10 loops it should change the duration to 0.95, after 10 more seconds to 0.9 and so on....

Do you have an idea how I could do this?

Here's the code for my current animation:

 CAShapeLayer *lineLayer = [CAShapeLayer layer];
    lineLayer.bounds = CGRectMake(0, 0, self.view.bounds.size.width, 20);
    lineLayer.position = self.view.center;

    lineLayer.strokeColor = [UIColor whiteColor].CGColor;
    lineLayer.lineDashPattern = @[@100];
    lineLayer.lineWidth = CGRectGetHeight(lineLayer.bounds);

    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:CGPointMake(0, CGRectGetMidY(lineLayer.bounds))];
    [linePath addLineToPoint:CGPointMake(CGRectGetMaxX(lineLayer.bounds), CGRectGetMidY(lineLayer.bounds))];
    lineLayer.path = linePath.CGPath;

   // [self.view.layer addSublayer:lineLayer];

    NSNumber *totalDashLenght = [lineLayer.lineDashPattern valueForKeyPath:@"@sum.self"]; // KVC is awesome :)

    CABasicAnimation *animatePhase = [CABasicAnimation animationWithKeyPath:@"lineDashPhase"];
    animatePhase.byValue = totalDashLenght; // using byValue means that even if the layer has a shifted phase, it will shift on top of that.
    animatePhase.duration = 0.5;
    animatePhase.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animatePhase.repeatCount = 10;

   // [lineLayer addAnimation:animatePhase forKey:@"marching ants"];


    // Create the shape layer
    shapeLayer = [CAShapeLayer layer];
    CGRect shapeRect = CGRectMake(0.0f, 0.0f, 2200.0f, 2000.0f);
    [shapeLayer setBounds:shapeRect];
    [shapeLayer setPosition:CGPointMake(160.0f, 1350.0f)];
    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
    [shapeLayer setStrokeColor:[[UIColor whiteColor] CGColor]];
    [shapeLayer setLineWidth:20.0f];
    [shapeLayer setLineJoin:kCALineJoinRound];
    [shapeLayer setLineDashPattern:
     [NSArray arrayWithObjects:[NSNumber numberWithInt:200],
      [NSNumber numberWithInt:100],
      nil]];


    // Setup the path
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, shapeRect);
    [shapeLayer setPath:path];
    CGPathRelease(path);

    // Set the layer's contents
    //[shapeLayer setContents:(id)[[UIImage imageNamed:@"GEIST.jpg"] CGImage]];

    [[[self view] layer] addSublayer:shapeLayer];


        if ([shapeLayer animationForKey:@"linePhase"])
            [shapeLayer removeAnimationForKey:@"linePhase"];
        else {
            CABasicAnimation *dashAnimation;
            dashAnimation = [CABasicAnimation
                             animationWithKeyPath:@"lineDashPhase"];

            [dashAnimation setFromValue:[NSNumber numberWithFloat:0.0f]];
            [dashAnimation setToValue:[NSNumber numberWithFloat:300.0f]];
            [dashAnimation setDuration:1];
            [dashAnimation setRepeatCount:10];
            [shapeLayer addAnimation:dashAnimation forKey:@"linePhase"];
1

There are 1 best solutions below

0
On

Just set yourself up to detect the end of your animation, either with a delegate method or with a completion block on the transaction. When your animation completes its ten repetitions, you can schedule a new animation with a shorter duration.

(And remember being small, playing under the table and dreaming...)