Animieren CAShapeLayer Größenänderung

Question

ich einen Kreis am zeichnen, mit einem anfänglichen Radius von 200

self.circle = [CAShapeLayer layer]; 
self.circle.fillColor = nil; 
self.circle.strokeColor = [UIColor blackColor].CGColor; 
self.circle.lineWidth = 7; 
self.circle.bounds = CGRectMake(0, 0, 2 * radius, 2 * radius); 
self.circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.radius, self.radius) 

Kann jemand bitte sagen Sie mir, wie eine Änderung auf einen Radius von 100 zu animieren?

Answer 1

Dies ist, wie ich es tun endete:

UIBezierPath *newPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(newRadius, newRadius) radius:newRadius startAngle:(-M_PI/2) endAngle:(3*M_PI/2) clockwise:YES]; 
CGRect newBounds = CGRectMake(0, 0, 2 * newRadius, 2 * newRadius); 

CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"]; 
pathAnim.toValue = (id)newPath.CGPath; 

CABasicAnimation* boundsAnim = [CABasicAnimation animationWithKeyPath: @"bounds"]; 
boundsAnim.toValue = [NSValue valueWithCGRect:newBounds]; 

CAAnimationGroup *anims = [CAAnimationGroup animation]; 
anims.animations = [NSArray arrayWithObjects:pathAnim, boundsAnim, nil]; 
anims.removedOnCompletion = NO; 
anims.duration = 2.0f; 
anims.fillMode = kCAFillModeForwards; 

[self.circle addAnimation:anims forKey:nil]; 

Dank Jacob für den Hinweis mich in die richtige Richtung.

Answer 2

können Sie einen CAAnimationGroup verwenden, um die bounds und path Ihrer animieren CAShapeLayer:

- (void)animateToRadius:(CGFloat)newRadius { 
    CAShapeLayer *shapeLayer = ...; 

    UIBezierPath *newBezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(newRadius, newRadius)]; 
    NSValue *newBounds = [NSValue valueWithCGRect:CGRectMake(0,0,2*newRadius,2*newRadius); 

    CAAnimationGroup *group = [CAAnimationGroup animation]; 

    NSMutableArray *animations = [@[] mutableCopy]; 
    NSDictionary *animationData = @{@"path":newBezierPath.CGPath, @"bounds":newBounds}; 
    for(NSString *keyPath in animationData) { 
     CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath]; 
     animation.toValue = animationData[keyPath]; 
     [animations addObject:animation]; 
    } 

    group.animations = [animations copy]; 
    group.duration = 2; 
    group.removedOnCompletion = NO; 
    group.fillMode = kCAFillModeForwards; 

    [shapeLayer addAnimation:group forKey:nil]; 
} 

Answer 3

Hier ist eine direkte schnelle Umwandlung von Jonathans Code sollte jemand es brauchen.

func scaleShape(shape : CAShapeLayer){ 

    let newRadius : CGFloat = 50; 

    let newPath: UIBezierPath = UIBezierPath(arcCenter: CGPointMake(newRadius, newRadius), radius: newRadius, startAngle: (CGFloat(-M_PI)/2.0), endAngle: (3 * CGFloat(M_PI)/2), clockwise: true); 


    let newBounds : CGRect = CGRect(x: 0, y: 0, width: 2 * newRadius, height: 2 * newRadius); 
    let pathAnim : CABasicAnimation = CABasicAnimation(keyPath: "path"); 

    pathAnim.toValue = newPath.CGPath; 

    let boundsAnim : CABasicAnimation = CABasicAnimation(keyPath: "bounds"); 
    boundsAnim.toValue = NSValue(CGRect: newBounds); 

    let anims: CAAnimationGroup = CAAnimationGroup(); 
    anims.animations = [pathAnim, boundsAnim]; 
    anims.removedOnCompletion = false; 
    anims.duration = 2.0; 
    anims.fillMode = kCAFillModeForwards; 

    shape.addAnimation(anims, forKey: nil); 
} 

Answer 4

Das ist, glaube ich, die einfachere und bevorzugte Art und Weise, es zu tun:

UIBezierPath *newPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(newRadius, newRadius) radius:newRadius startAngle:(-M_PI/2) endAngle:(3*M_PI/2) clockwise:YES]; 
CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath:@"path"]; 
pathAnim.fromValue = (id)self.circle.path; 
pathAnim.toValue = (id)newPath.CGPath; 
pathAnim.duration = 2.0f; 
[self.circle addAnimation:pathAnim forKey:@"animateRadius"]; 

self.circle.path = newPath.CGPath; 

ich diesen Ansatz bekam von der Apple Documentation here (siehe Listing 02.03). Die wichtigen Dinge hier sind, dass Sie die setzen und auch den endgültigen Wert für self.circlepath zu newPath.CGPath direkt nach dem Einrichten der Animation festlegen. Eine Animation ändert den zugrunde liegenden Wert des Modells nicht. In der anderen Vorgehensweise ändern Sie also nicht permanent die path Variable der Shape-Ebene.

Ich habe eine Lösung wie die gewählte Antwort in der Vergangenheit (mit removedOnCompletion und fillMode etc) verwendet, aber ich habe festgestellt, dass auf bestimmten Versionen von iOS Speicherverluste verursacht, und auch manchmal dieser Ansatz funktioniert einfach nicht für einige Grund.

Mit diesem Ansatz ist die Animation explizit zu schaffen (beide wo es beginnt und wo es endet), und Sie am Ende den endgültige bleibenden Wert für den Pfad angeben (mit der letzten Zeile) , so dass es keine Notwendigkeit gibt, sich damit zu befassen, die Animation nicht zu entfernen, wenn sie beendet ist (was meiner Meinung nach zu Speicherverlusten führt, wenn Sie diese Animation oft machen ... die nicht entfernten Animationen werden im Speicher aufgebaut).

Auch habe ich die Animation der bounds entfernt, weil Sie es nicht brauchen, um den Kreis zu animieren. Auch wenn der Pfad außerhalb der Grenzen der Ebene gezeichnet wird, wird er immer noch vollständig angezeigt (Informationen hierzu finden Sie in der Dokumentation für CAShapeLayer). Wenn Sie die Grenzen aus einem anderen Grund animieren müssen, können Sie denselben Ansatz verwenden (stellen Sie sicher, dass Sie den Wert und den Endwert für die Grenzen angeben).