Animation du changement de taille de CAShapeLayer

Je suis en dessinant un cercle avec un rayon de 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)

Quelqu'un peut-il me dire comment animer un changement à un rayon de 100?

source d'informationauteur Jonathan

C'est comment j'ai fini par le faire:

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

Grâce à Jacob pour me pointer dans la bonne direction.

6

C'est, je crois, la plus simple et la meilleure façon de le faire:
```
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;
```
J'ai eu cette approche de la La Documentation d'Apple ici (Voir la liste 3-2). Les choses importantes sont ici que de la configuration de la fromValue et aussi le réglage de la valeur finale pour self.circle's path à newPath.CGPath droit après avoir configuré l'animation. Une animation ne change pas la valeur sous-jacente du modèle, donc dans l'autre approche, vous n'êtes pas en train de faire un changement permanent de la forme de la couche path variable.

J'ai utilisé une solution comme la réponse choisie par le passé (à l'aide de removedOnCompletion et fillMode etc) mais j'ai constaté que sur certaines versions de l'iOS, ils ont causé des fuites de mémoire, et aussi, parfois, cette approche ne fonctionne pas pour une raison quelconque.

Avec cette approche, vous êtes en train de créer l'animation explicitement (à la fois, où elle commence et où elle se termine), et vous êtes à la spécification de la dernière valeur permanente pour le chemin à la fin (avec la dernière ligne), de sorte qu'il n'y a pas besoin de jouer avec pas de retrait de l'animation quand il se termine (qui je crois est ce qui conduit à des fuites de mémoire si vous faites cela, l'animation d'un grand nombre de fois... la unremoved animations construire en mémoire).

Aussi, j'ai enlevé l'animation de la bounds parce que vous n'en avez pas besoin pour animer le cercle. Même si le chemin est tracé à l'extérieur des limites de la couche, ça va encore être entièrement affiché (voir la documentation pour CAShapeLayer à ce sujet). Si vous avez besoin d'animer les limites pour une autre raison, vous pouvez utiliser la même approche (en prenant soin de spécifier la fromValue et la valeur finale de limites).

Vous pouvez utiliser un CAAnimationGroup pour animer la bounds et path de votre 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];
}

Ici est une conséquence directe de conversion rapide de Jonathan code si quelqu'un en a besoin.

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);
}

Vous devez vous connecter pour publier un commentaire.