Mi az az animáció a UIKit-ben?

A UIKit animációk vizuális változások az UI elemek tulajdonságaiban (például pozíció, méret, szín, átlátszóság), amelyek idővel mozgatást és dinamikát hoznak létre.

A UIKit animációk fő megvalósítási módjai:

1. UIView.animate(withDuration:animations:): A legegyszerűbb módja az UIView szabványos tulajdonságainak animálásának.

   // UIView középpontjának és átlátszóságának változtatása
   UIView.animate(withDuration: 0.5) {
       myView.center = newCenter
       myView.alpha = 0.0
   }
   

2. UIView.animate(withDuration:delay:options:animations:completion:): Rugalmasabb módszer késleltetési paraméterekkel, animációs görbékkel és befejező blokkokkal.

   // Késleltetéssel és ismétlési lehetőséggel
   UIView.animate(withDuration: 0.8, delay: 0.2, options: [.repeat, .autoreverse]) {
       myView.backgroundColor = .red
   } completion: { finished in
       // Műveletek a befejezés után (ha nem ismétlődik végtelenül)
   }
   

3. Fő animációs opciók (UIView.AnimationOptions):

   • .curveEaseInOut
   • .curveEaseIn
   • .curveEaseOut
   • .curveLinear
   • .repeat
   • .autoreverse
   • .allowUserInteraction

4. Constraint alapú animációk: Constraint változtatások animálása a layoutIfNeeded() segítségével.

   // Constraint módosítása
   myViewHeightConstraint.constant = 200
   
   // Layout változás animálása
   UIView.animate(withDuration: 0.3) {
       self.view.layoutIfNeeded()
   }
   

5. Változások közötti átmeneti animációk: Átmenetek különböző nézetek között (transition(from:to:duration:options:completion:)) vagy a konténeren belül.

   // Példa átmenettel
   UIView.transition(from: oldView, to: newView, duration: 0.5, options: [.transitionFlipFromLeft]) { finished in
       // Műveletek az átmenet után
   }
   

6. Core Animation (CALayer): Mélyebb és erősebb keretrendszer rétegek animálására. Lehetővé teszi a CALayer tulajdonságainak (például position, bounds, opacity, transzformációk) animálását.

   // Egyszerű opacity változás CALayer-en
   let animation = CABasicAnimation(keyPath: "opacity")
   animation.fromValue = 1.0
   animation.toValue = 0.0
   animation.duration = 1.0
   myView.layer.add(animation, forKey: "fadeAnimation")
   

7. Animációk UIStackView használatával: Automatikus animációk az elemek elrendezésében bekövetkező változásoknál.

   // Nézet hozzáadása UIStackView-hez animációval
   UIView.animate(withDuration: 0.3) {
       stackView.addArrangedSubview(newView)
       stackView.layoutIfNeeded()
   }
   

Az animációk használata javítja a felhasználói élményt, interaktívabbá és intuitívabbá teszi az alkalmazást.