Zeichne Kreisanimation mit abgerundetem Strich in iOS

Question

Ich versuche einen Kreis zu animieren, der in iOS 7 gezeichnet wird - was ziemlich einfach ist.

Mein Problem ist, dass ich den Strich brauchen, um abgerundete Enden zu haben. Das versuche ich jetzt, indem ich der Startposition der Animation einen weiteren Kreis hinzufüge.

Dann für das Ende, das sich bewegt, brauche ich einen anderen Kreis zu folgen. Es macht ziemlich genau das, was ich will, aber ich brauche es, um ein easeInOutQuart Timing zu verwenden, das schwieriger wird, als ich dachte.

Das Ergebnis ist so weit dies:

Mein Code sieht wie folgt aus:

- (void) drawCircleAnimated { 
    int radius = 100; 

    CALayer *animationLayer = [CALayer layer]; 
    animationLayer.frame = CGRectMake(20.0f, 64.0f, CGRectGetWidth(self.view.layer.bounds) - 40.0f, CGRectGetHeight(self.view.layer.bounds) - 84.0f); 

    [self.view.layer addSublayer:animationLayer]; 

    CGRect pathRect = CGRectInset(animationLayer.bounds, 100.0f, 100.0f); 

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius]; 

    CAShapeLayer *pathLayer = [CAShapeLayer layer]; 
    pathLayer.frame = animationLayer.bounds; 
    pathLayer.bounds = pathRect; 
    pathLayer.geometryFlipped = NO; 
    pathLayer.path = path.CGPath; 
    pathLayer.strokeColor = [[UIColor blackColor] CGColor]; 
    pathLayer.fillColor = nil; 
    pathLayer.lineWidth = 10.0f; 
    pathLayer.lineJoin = kCALineJoinBevel; 

    [animationLayer addSublayer:pathLayer]; 

    [self addStartPointCircle]; 
    CAShapeLayer* circleToMove = [self addStartPointCircle]; 
    circleToMove.anchorPoint = CGPointZero; 

    [pathLayer addSublayer:circleToMove]; 

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    pathAnimation.duration = 5.0; 
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
    [pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"]; 

    CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
    penAnimation.duration = 5.0; 
    penAnimation.path = pathLayer.path; 
    penAnimation.calculationMode = kCAAnimationPaced; 
    penAnimation.delegate = self; 
    penAnimation.removedOnCompletion = NO; 
    [circleToMove addAnimation:penAnimation forKey:@"position"]; 
} 

die Beschleunigungsfunktion zu erreichen, habe ich dies die penAnimation hinzugefügt - aber es doesn‘ t nichts ändern. Ich Gast es wird immer die andere Animation folgen?

penAnimation.values = [NSArray arrayWithObjects: // i.e., Rotation values for the 3 keyframes, in RADIANS 
         [NSNumber numberWithFloat:0.0 * M_PI], 
         [NSNumber numberWithFloat:0.75 * M_PI], 
         [NSNumber numberWithFloat:1.5 * M_PI], nil]; 
penAnimation.keyTimes = [NSArray arrayWithObjects:  // Relative timing values for the 3 keyframes 
          [NSNumber numberWithFloat:0], 
          [NSNumber numberWithFloat:.5], 
          [NSNumber numberWithFloat:1.0], nil]; 
penAnimation.timingFunctions = [NSArray arrayWithObjects: 
           [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn], // from keyframe 1 to keyframe 2 
           [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], nil]; // from keyframe 2 to keyframe 3 

Answer 1

Dies sollte alles sein, was Sie hinzufügen müssen.

pathLayer.lineCap = kCALineCapRound;