Creare animazioni in gruppo con “CAAnimationGroup”

In questo articolo creeremo un esempio su come creare diverse animazioni in gruppo. Come avete già visto gli altri oggetti di Xcode, tipo UIAlertView, UIActionSheet, UIPopovercontroller ecc, appaiono con animazioni. Le animazioni che questi oggetti usano sono i metodi di CALayer. Per creare un semplice animazione in gruppo praticamente dobbiamo creare delle animazioni di base con CABasicAnimation. Creiamo un nuovo progetto e importiamo il framework QuartzCore inserendo il suo header nella classe dove vogliamo lavorare:

[code lang=”obj-c”]
#import <QuartzCore/QuartzCore.h>
[/code]

Creiamo un oggetto UIImageView:

[code lang=”obj-c”]

UIImage *image = [UIImage imageNamed:@"tigre.jpg"];

img = [[UIImageView alloc] initWithFrame:CGRectMake(40, 100, 240, 240)];

img.image = image;;

img.contentMode = UIViewContentModeScaleAspectFit;

[self.view addSubview:img];
[/code]

Poi creiamo 3 metodi per modificare: l’opacità, la posizione, la dimensione:

[code lang=”obj-c”]
-(CABasicAnimation *) transparencyAnimation {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue = [NSNumber numberWithFloat:1.0];

animation.toValue = [NSNumber numberWithFloat:0.0];

return animation;

}

-(CABasicAnimation *) translateAnimation {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];

animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(160, 0)];

animation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 200)];

return animation;

}

-(CABasicAnimation *) changeSizeAnimation {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];

animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];

animation.toValue = [NSValue valueWithCGSize:CGSizeMake(300, 300)];

return animation;

}
[/code]

Bene abbiamo creato 3 animazioni e adesso dobbiamo usarle nel UIImageView in gruppo. Possiamo inserire il metodo successivo nel viewDidLoad o collegarlo con qualche bottone:

[code lang=”obj-c”]
CAAnimationGroup * animationGroup = [CAAnimationGroup animation];

animationGroup.animations = [NSArray arrayWithObjects:[self transparencyAnimation], [self translateAnimation], [self changeSizeAnimation], nil];

animationGroup.duration = 2.0;

animationGroup.removedOnCompletion = YES;

animationGroup.fillMode = kCAFillModeForwards;

[img.layer addAnimation:animationGroup forKey:nil];

[/code]

Praticamente al layer del UIImageview abbiamo inserito l’animazione CAAnimationGroup. Proviamo l’applicazione e vediamo il risultato. Potete scaricare qui l’esempio.

download codice sorgente