iOS: Animations - Fazendo animações para iPhone

No post de hoje veremos como fazer animações simples. Esse tipo de animação é bastante utilizado para arrastar views pela tela. Por exemplo: Menus, ações, subir picker view, etc. Vamos criar um novo projeto chamado Animation, selecionando View-based Application como template padrão.

Por | @reprotector Programação

No post de hoje veremos como fazer animações simples. Esse tipo de animação é bastante utilizado para arrastar views pela tela. Por exemplo: Menus, ações, subir picker view, etc...

Vamos criar um novo projeto chamado Animation, selecionando View-based Application como template padrão.

No nosso .xib vamos adicionar um botão para requisitar o deslocamento e para requisitar a volta para a posição normal. Este botão será o nosso “Menu”, e por isso ficará no canto inferior da tela:

iOS: Animations - Fazendo animações para iPhone


Dentro deste view, iremos adicionar um outro view aonde ficarão os botões do nosso menu. Coloquei este view com um tamanho de 150×111, suficiente para colocar 3 botões de dimensões 150×37. O X e o Y deste view foram de 170 e 480 para poderem estar logo abaixo da tela, escondidos.
iOS: Animations - Fazendo animações para iPhone


Agora vamos abrir a classe AnimationViewController para declararmos os IBOutlets e IBAction. O IBOutlet serve para linkar o objeto com o Interface Builder e o IBAction serve para realizar ações. Os IBActions são utilizados principalmente com botões, mas não são só eles que possuem actions.

@interface AnimationViewController : UIViewController {
    IBOutlet UIView *menuView;
    IBOutlet UIButton *menuButton;
}
 
@property (nonatomic, retain) IBOutlet UIView *menuView;
@property (nonatomic, retain) IBOutlet UIButton *menuButton;
 
-(IBAction) menuAnimation : (id) sender;
-(IBAction) event1 : (id) sender;
-(IBAction) event2 : (id) sender;
-(IBAction) event3 : (id) sender;
 
@end


Repare que criamos apenas 2 IBOutlets. Poderíamos ter criado um IBOutlet para cada elemento do nosso .xib mas só vamos alterar via código o view do menu e o botão de menu. Só precisamos declarar os IBOutlets dos elementos de interface que vamos alterar via código. Além disso, poderíamos ter declarado apenas um método para o evento dos botões de menu, identificando-os via o argumento que é passado ( (id) sender) . Para fazer isso, usaríamos o atributo TAG no Interface Builder, e identificaríamos essa tag através de [sender tag]. Já que criamos novas properties e métodos, devemos definí-los no nosso arquivo .m:

@implementation AnimationViewController
 
@synthesize menuView;
@synthesize menuButton;
 
-(IBAction) menuAnimation : (id) sender{}
-(IBAction) event1 : (id) sender{}
-(IBAction) event2 : (id) sender{}
-(IBAction) event3 : (id) sender{}


Devemos linká-los no Interface Builder. Vamos linkar a view que criamos com o nosso menuView e o botão que está aparecendo na tela com o menuButton. Também devemos linkar os actions para os respectivos IBAction´s. Não irei demonstrar esse passo neste tutorial de hoje, mas caso tenham algum problema postem nos comentários.

Agora precisamos colocar o código que fará a animação em si. Devemos elevar o view em 111 pixels pois ele está 111px abaixo da tela. Para elevarmos, devemos nos aproximar do referencial superior da tela, que é o Y=0; Como estamos com um Y maior, devemos diminuir o valor dele. Para fazermos essa “transformação” utilizaremos o transform do objeto.

-(IBAction) menuAnimation : (id) sender{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.75];
    menuView.transform = CGAffineTransformMakeTranslation(0,-111);
    menuButton.transform = CGAffineTransformMakeTranslation(0,-111);
    [menuButton setTitle:@"Esconder" forState:UIControlStateNormal];
    [UIView commitAnimations];
}


Repare que iniciamos um bloco de Animação com a linha [UIView beginAnimations:nil context: NULL] e a terminamos com [UIView commitAnimations]. A linha commitAnimations segue a mesma conotação que usamos em commit de Subversion, ou seja, significa que as alterações foram feitas e podem ser realizadas. Temos também a linha [UIView setAnimationDuration:0.75], que delimita o tempo (em segundos) que demorará a animação.

Neste momento podemos testar nosso código que irá funcionar dentro do esperado. Mas agora temos o seguinte problema: o view não abaixa. Faremos uma variável de controle (booleana) que dirá se o view está aparecendo ou não. Declare-a no seu header com o nome de viewIsHidden.

Em viewDidLoad iremos inicializar a nossa variável colocando-a como falsa, pois quando nossa view é carregada o nosso menu não está aparecendo:

- (void)viewDidLoad {
    [super viewDidLoad];
    viewIsHidden = YES;
}


Agora vamos colocar nossa variável de controle para sabermos se o view está escondido. Caso ele esteja, devemos mostrá-lo. Caso contrário, devemos esconde-lo. Repare no código abaixo que utilizamos (o,o) no nosso transform. Isso significa que estamos voltando para a posição de origem, colocada no Interface Builder.

-(IBAction) menuAnimation : (id) sender{
    if (viewIsHidden){
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.75];
        menuView.transform = CGAffineTransformMakeTranslation(0,-111);
        menuButton.transform = CGAffineTransformMakeTranslation(0,-111);
        [menuButton setTitle:@"Esconder" forState:UIControlStateNormal];
        [UIView commitAnimations];
                viewIsHidden = YES;
    } else {
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.75];
        menuView.transform = CGAffineTransformMakeTranslation(0,0);
        menuButton.transform = CGAffineTransformMakeTranslation(0,0);
        [menuButton setTitle:@"Menu" forState:UIControlStateNormal];
        [UIView commitAnimations];
                viewIsHidden = NO;
    }
}


Pronto, agora o nosso menu está funcionando perfeitamente. Não utilizei o código dos eventos pois não era o objetivo deste post. Você pode utilizá-los da maneira que quiser (utilizando navigation controller, labels, etc).

O arquivo do projeto encontra-se disponível para download.

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo