Lição: 82: Animações e Transições em Swift
As animações são uma maneira poderosa de aprimorar a experiência do usuário em suas aplicações iOS. Nesta aula, vamos explorar como criar animações e transições suaves usando Swift, focando nas animações de UIView e nas transições de view controller.
Animações UIView
Animação Básica
Para criar uma animação simples, você pode usar o método UIView.animate(withDuration:animations:)
. Este método permite animar alterações nas propriedades de suas views.
import UIKit
class SimpleAnimationViewController: UIViewController {
let squareView: UIView = {
let view = UIView()
view.backgroundColor = .blue
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(squareView)
// Define o tamanho e a posição iniciais
NSLayoutConstraint.activate([
squareView.widthAnchor.constraint(equalToConstant: 100),
squareView.heightAnchor.constraint(equalToConstant: 100),
squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
squareView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
// Inicia a animação
animateView()
}
func animateView() {
UIView.animate(withDuration: 1.0, animations: {
self.squareView.backgroundColor = .red
self.squareView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
}) { _ in
// Conclusão da animação
UIView.animate(withDuration: 1.0) {
self.squareView.transform = CGAffineTransform.identity
self.squareView.backgroundColor = .blue
}
}
}
}
Neste exemplo, criamos uma simples view quadrada, animamos sua cor para vermelho e a escalamos em 1,5 vezes. Após a conclusão da primeira animação, revertamos a transformação e a cor de volta para azul.
Animação por Keyframes
Animações por keyframes permitem que você especifique múltiplos keyframes durante a animação. Isso torna possível criar animações mais complexas.
func keyframeAnimation() {
UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.3) {
self.squareView.transform = CGAffineTransform(translationX: 100, y: 0)
}
UIView.addKeyframe(withRelativeStartTime: 0.3, relativeDuration: 0.3) {
self.squareView.transform = CGAffineTransform(translationX: 100, y: 100)
}
UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.3) {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 100)
}
UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1) {
self.squareView.transform = CGAffineTransform.identity
}
})
}
Na função keyframeAnimation
, movemos nossa view quadrada em um caminho quadrado definindo múltiplos keyframes. Cada keyframe constitui um ponto na sequência geral da animação.
Transições de View Controller
Ao fazer transições entre view controllers, você pode utilizar transições personalizadas para criar efeitos visuais envolventes.
Transição Personalizada
Vamos definir uma simples transição personalizada entre dois view controllers com um efeito de desvanecimento.
class FirstViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
let button = UIButton(type: .system)
button.setTitle("Ir para a Segunda View", for: .normal)
button.addTarget(self, action: #selector(presentSecondViewController), for: .touchUpInside)
button.center = view.center
view.addSubview(button)
}
@objc func presentSecondViewController() {
let secondVC = SecondViewController()
secondVC.modalPresentationStyle = .fullScreen
self.present(secondVC, animated: true, completion: nil)
}
}
class SecondViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
}
}
// Implementando Transição Personalizada
extension FirstViewController: UIViewControllerTransitioningDelegate {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.5
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromView = transitionContext.view(forKey: .from),
let toView = transitionContext.view(forKey: .to) else { return }
transitionContext.containerView.addSubview(toView)
toView.alpha = 0
UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
toView.alpha = 1
fromView.alpha = 0
}) { _ in
fromView.alpha = 1
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
}
}
}
Neste exemplo, criamos dois view controllers. O FirstViewController
tem um botão que apresenta o SecondViewController
. A transição personalizada envolve desvanecer a primeira view enquanto desvanecemos a segunda.
Usando a Transição Personalizada
Para habilitar a transição personalizada, defina o transitioningDelegate
:
@objc func presentSecondViewController() {
let secondVC = SecondViewController()
secondVC.modalPresentationStyle = .custom
secondVC.transitioningDelegate = self
self.present(secondVC, animated: true, completion: nil)
}
Conclusão
Animações e transições são essenciais para criar uma experiência de usuário agradável em aplicações iOS. Nesta aula, cobrimos animações básicas de view, animações por keyframes e transições personalizadas de view controller. Sinta-se à vontade para experimentar diferentes propriedades e durações para construir interfaces envolventes!