Tworzenie animacji w aplikacjach z UIViewPropertyAnimator w iOS 10

Wraz z pojawieniem się systemu iOS w wersji 10, Apple udostępniło developerom nowe narzędzie – UIViewPropertyAnimator. Zwiększa ono zakres możliwości przy tworzeniu animacji w naszej aplikacji. Co można dzięki niemu osiągnąć i jak wykorzystać go do tworzenia animacji?

UIViewPropertyAnimator – możliwości

W ramach nowych możliwości znalazło się np. zatrzymywanie animacji oraz jej ponowne wznowienie (również z innymi parametrami czasowymi), zakończenie animacji w dowolnym momencie, cofanie animacji czy też przewinięcie jej do dowolnego momentu.

Nowością jest również to, że poza wcześniej używanymi już opcjami czasowymi animacji takimi, jak np. EaseInEaseOut teraz posiadamy również możliwość zdefiniowania własnej funkcji czasowej na podstawie punktów kontrolnych funkcji sześciennej.

Tworzenie animacji krok po kroku

Aby utworzyć animację z wykorzystaniem animatora tworzymy jego instancję:

let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
	//Animations
}

Możemy również użyć konstruktora, który pozwala nam zdefiniować punkty kontrolne dla niestandardowej funkcji czasowej:

let animator = UIViewPropertyAnimator(duration: 5,
                                       controlPoint1: CGPoint(x: 0.3, y: 1),
                                       controlPoint2: CGPoint(x: 0.7, y: 0.2)) {
        //Animations
 }

Aby dodać blok wykonywany po zakończeniu animacji, wywołujemy funkcję addCompletion:

animator.addCompletion { (UIViewAnimatingPosition) in
         //some code
}

Nowością tutaj jest fakt, że nasz blok otrzymuje parametr z pozycją animacji. W ramach dostępnych pozycji mamy pozycję początkową, końcową oraz obecną.

Po skonfigurowaniu naszego animatora przychodzi czas na rozpoczęcie animacji. Aby tego dokonać, wywołujemy funkcję startAnimation na naszym animatorze:

animator.startAnimation()

Po wystartowaniu naszej animacji możemy ją pauzować. Robimy to za pomocą funkcji pauseAnimation:

animator.pauseAnimation()

Możemy ją także zastopować przy użyciu funkcji stopAnimation:

animator.stopAnimation(true)

Funkcja przyjmuje parametr withoutFinishing, dzięki któremu możemy zadecydować, czy chcemy, aby wraz z zastopowaniem animacja została również zakończona. Jeśli zostanie zakończona to animowane obiekty pozostaną w obecnej pozycji. W innym wypadku sami kończymy animację przy pomocy funkcji finishAnimation:

animator.finishAnimation(at: .end)

Przyjmowany parametr określa pozycję zakończenia. Dostępne pozycje to początek, koniec, oraz obecna pozycja, tak samo, jak w przypadku bloku ukończenia.

Po wykonaniu pauzowania na animacji możemy ją ponownie uruchomić funkcją startAnimation, jednak istnieje również bardziej zaawansowana opcja, czyli użycie funkcji continueAnimation, która dodatkowo oferuje zmianę parametrów czasowych oraz długości pozostałego fragmentu animacji:

let timing = UICubicTimingParameters(animationCurve: .linear)
animator.continueAnimation(withTimingParameters: timing, durationFactor: 1)

Inną możliwością jest odwrócenie animacji w drugą stronę, aby tego dokonać zmieniamy właściwość isReversed naszego animatora:

animator.isReversed = true

Jak widać, wprowadzenie nowej klasy UIViewPropertyAnimator oferuje kilka naprawdę ciekawych funkcji, które niewątpliwie są w stanie sprawić, że tworzenie animacji może stać się dużo prostsze.