20.11.2024

Aula 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!

Video

Navigation