Восхитительная интерактивная анимация
Анимация является неотъемлемой частью современных мобильных приложений. Они дают пользователям обратную связь об их действиях и уведомляют о том, что происходит в приложении. Кроме того, анимация придает вашему приложению более качественный внешний вид.
В этой статье я покажу, как создавать интерактивные анимации, которые очень похожи на те, которые вы видели в приложении Spotify iOS.
Первоначальная настройка
Давайте начнем с создания элементов пользовательского интерфейса, которые мы хотели бы анимировать. В этой статье мы будем использовать следующие классы:
PlayerViewController- определяет пользовательский интерфейс игрока.TabBarController- содержит представление панели вкладок и добавленный в дочерний элемент hasPlayerViewController.- TransitionCoordinator - обрабатывает жесты пользователя и запускает анимацию для представлений PlayerViewController и TabBarController.
Классы контроллеров представления не требуют пояснений, и TransitionCoordinator можно определить следующим образом:
class TransitionCoordinator {
enum State: Equatable {
case open
case closed
static prefix func !(_ state: State) -> State {
return state == .open ? .closed : .open
}
}
private weak var tabBarViewController: TabBarController!
private weak var playerViewController: PlayerViewController!
private lazy var panGestureRecognizer = createPanGestureRecognizer()
private var state: State = .closed // ➊
private var runningAnimators = [UIViewPropertyAnimator]() // ➋
}
➊ Определяет состояние игрока, которое может быть открытым или закрытым.
➋ Коллекция запущенных аниматоров свойств. Мы добавим аниматор свойств в коллекцию, когда создадим его, и удалим, когда анимация будет завершена.
Интерактивная анимация с UIViewPropertyAnimator
Существуют различные API-интерфейсы, которые можно использовать для запуска анимации на iOS, в зависимости от желаемого уровня управления и настройки. В iOS 10 Apple представила UIViewPropertyAnimator, который предлагает больше возможностей и большую степень контроля, чем UIView.animate. Он прекрасно работает вместе с UIPanGestureRecognizer и может быть легко использован для создания интерактивной анимации.
Давайте добавим обработчик распознавателем жестов панорамирования, чтобы мы могли интерактивно потянуть вид игрока вверх или вниз.
@objc private func didPanPlayer(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .began:
startInteractiveTransition(for: !state) // ➊
case .changed:
let translation = recognizer.translation(in: recognizer.view!)
updateInteractiveTransition(distanceTraveled: translation.y) // ➋
case .ended:
let velocity = recognizer.velocity(in: recognizer.view!).y
let isCancelled = isGestureCancelled(with: velocity)
continueInteractiveTransition(cancel: isCancelled)
case .cancelled, .failed:
continueInteractiveTransition(cancel: true) // ➌
default:
break
}
}
Анимация контента
Затем давайте анимируем содержание наших видов с помощью анимации слияния с затухания и затухания. Эта анимация занимает меньше времени по сравнению с кадрной анимацией. Чтобы создать этот эффект, мы выполняем анимацию ключевых кадров внутри аниматора свойств с относительным временем и продолжительностью запуска:
private func fadeInPlayerAnimator(with duration: TimeInterval) -> UIViewPropertyAnimator {
let animator = UIViewPropertyAnimator(duration: duration, curve: .easeIn)
addKeyframeAnimation(to: animator, withRelativeStartTime: 0.0, relativeDuration: 0.5) {
self.updatePlayer(with: self.state)
}
animator.scrubsLinearly = false
return animator
}
private func fadeOutMiniPlayerAnimator(with duration: TimeInterval) -> UIViewPropertyAnimator {
let animator = UIViewPropertyAnimator(duration: duration, curve: .easeOut)
addKeyframeAnimation(to: animator, withRelativeStartTime: 0.0, relativeDuration: 0.5) {
self.updateMiniPlayer(with: self.state)
}
animator.scrubsLinearly = false
return animator
}
Вывод
Анимация - это отличный способ уведомить пользователя о том, что происходит, и добавить отточенный внешний вид в ваше приложение. В этой статье мы узнали, как создавать интерактивную анимацию с помощью UIViewPropertyAnimator.