Main Contents

[Objective-C] Créer un fondu avec des Layers

août 8, 2010

Voilà donc un petit tuto sur comment créer un fondu entre 2 images. Il y a plusieurs méthodes. Je vais le faire avec des Layers et non avec de multiples UIView.

Je part d’un projet de type « View-based Application ».
Première chose, ajouter le Framework QuartzCore au projet, puis dans le controller de votre vue ajouter l’import suivant :

1
#import <QuartzCore/QuartzCore.h>

Ensuite ajouter vos 2 images au projet. On va configurer notre image initiale dans la vue.

1
2
3
4
5
6
7
- (void)viewDidLoad {
	[super viewDidLoad];
	UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"edp.png"]];
	//On ajoute à la vue le layer avec notre image
	[[[self view] layer] addSublayer:[imgView layer]];
	[imgView release];
}

Vous pouvez lancer l’application, vous devriez voir votre image en fond.
Maintenant, on va ajouter un bouton et une action pour le fondu. Je met uniquement le code pour le fondu, je vous laisse ajouter le bouton, l’IBAction et faire la connexion dans IB.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (IBAction) animate
{
	//on configure l animation
	CATransition *applicationLoadViewIn = [CATransition animation];
	[applicationLoadViewIn setDuration:1];
	[applicationLoadViewIn setType:kCATransitionFade];
	[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
	//on ajoute l animation au layer
	[[self.view layer] addAnimation:applicationLoadViewIn forKey:kCATransitionFade];
	//On configure notre nouvel image
	UIImageView *imgView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"edpBlack.png"]];
	//on rajoute un teste pour que le fondu fonctionne dans les 2 sens
	if(self.view.layer.sublayers.count<=2)
		//premier cas on ajoute notre image
		[[[self view] layer] addSublayer:[imgView2 layer]];
	else {
		//deuxieme cas on supprime notre image
		[[self.view.layer.sublayers lastObject] removeFromSuperlayer];
	}
	[imgView2 release];
}

Il ne reste plus qu’à tester et à admirer le fondu 🙂
Voilà ce que ca donne ans mon exemple.
http://www.jkraft.fr/wp-content/uploads/2010/08/TutoAnim.mov

Catégorie(s): Développement, iPad, Iphone, Objective-C | Comments (1)

Un commentaire

  1. bernard langue (1 comments) août 3, 2011 @ 11 h 27 min

    en fait je me demandais comment est ce qu’il serait possible de mettre cet effet en fond, c’est à dire les deux images imgView et imgView2 merci 🙂

Leave a comment