UITabBarItem Иконка Анимация

Question

Приложение Skype для iPhone использует анимированные иконки TabBar. Например, во время входа в систему значок самой правой вкладки отображает стрелки. Во время вызова значок вкладки «Звонок» мягко мигает, что, очевидно, делается с помощью анимации.

Интересно, как можно анимировать значки элементов панели вкладок?

В моем конкретном случае, когда пользователь нажимает кнопку «Избранное», он переходит на элемент панели вкладок «Избранное». Я уже реализовал анимацию прыжка, но мне бы хотелось, чтобы значок соответствующей вкладки мигал в конце анимации, чтобы создать ощущение завершенности.

Любые предложения о направлении, в котором я должен искать?

Заранее спасибо.

Answer 1

Я удивлен, насколько простым было решение!

Добавьте метод в ваш .m-файл класса Application Delegate (или любой другой класс, который управляет вашим UITabBar), содержащий следующую подпрограмму:

1. Создайте UIImageView, который будет использоваться для анимации.
2. Добавьте его в представление TabBar, используя метод addSubview:.
3. Уменьшите его до размера UITabBarItem (используйте размер кадра UITabBar и количество элементов панели вкладок для расчета размера кадра).
4. Настройте значение frame.origin.x для imageView, чтобы поместить изображение прямо над элементом вкладки, который вы хотите анимировать.
5. Добавить анимацию, которую вы хотите, в imageView (вы можете играть с непрозрачностью, поменять несколько изображений - все, что вы хотите).

Довольно просто, тебе так не кажется?

Этот метод можно вызывать в экземпляре UIApplicationDelegate везде, где вам нужно анимировать элемент панели вкладок.

Также важно отметить, что вы можете нажать ЧЕРЕЗ imageView, чтобы выбрать элемент панели вкладок, как если бы на панели вкладок не было изображения. Здесь можно сделать много интересных выводов о том, что вы можете сделать, если знаете это ...

Answer 2

Я нашел лучшее решение этой проблемы. Добавление пользовательского представления изображений не является лучшим подходом, потому что в iOS 10.0 и более поздних версиях при изменении ориентации изменились рамка значка и положение текста. Вам просто нужно установить класс UITabBarController и поставить следующий код.

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

    let index = self.tabBar.items?.index(of: item)
    let subView = tabBar.subviews[index!+1].subviews.first as! UIImageView
    self.performSpringAnimation(imgView: subView)
}

//func to perform spring animation on imageview
func performSpringAnimation(imgView: UIImageView) {

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {

        imgView.transform = CGAffineTransform.init(scaleX: 1.4, y: 1.4)

        //reducing the size
        UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
            imgView.transform = CGAffineTransform.init(scaleX: 1, y: 1)
        }) { (flag) in
        }
    }) { (flag) in

    }
}  

Answer 3

Вы можете анимировать значки вкладок, получив их вид, а затем делать любую анимацию, какую захотите для UIView.Ниже приведен простой пример с масштабным преобразованием, ура!

func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem){
        var tabBarView: [UIView] = []

        for i in tabBar.subviews {
            if i.isKind(of: NSClassFromString("UITabBarButton")! ) {
                tabBarView.append(i)
            }
        }

        if !tabBarView.isEmpty {
            UIView.animate(withDuration: 0.15, animations: {
                tabBarView[item.tag].transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            }, completion: { _ in
                UIView.animate(withDuration: 0.15) {
                    tabBarView[item.tag].transform = CGAffineTransform.identity
                }
            })
        }
    }

ps: присвойте тег для каждого UITabBarItem в порядке

Answer 4

На самом деле есть гораздо более простой способ: https://medium.com/@werry_paxman/bring-your-uitabbar-to-life-animating-uitabbaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 5

Имейте в виду, что порядок подпредставлений в UITabBar может быть неупорядоченным, поэтому доступ к нужному элементу из него с помощью индекса может работать некорректно, как ответ Naresh . Посмотрите на этот пост UITabBar subviews изменить порядок

Решение, которое я нашел, состоит в том, чтобы сначала отфильтровать и отсортировать представления, а затем получить к ним доступ, используя правильный индекс tabBarItem.

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

    let orderedTabBarItemViews: [UIView] = {
        let interactionViews = tabBar.subviews.filter({ $0 is UIControl })
        return interactionViews.sorted(by: { $0.frame.minX < $1.frame.minX })
    }()

    guard
        let index = tabBar.items?.index(of: item),
        let subview = orderedTabBarItemViews[index]?.subviews.first
    else {
        return
    }

    performSpringAnimation(for: subview)
}

func performSpringAnimation(for view: UIView) {
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
        view.transform = CGAffineTransform(scaleX: 1.25, y: 1.25)
        UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
            view.transform = CGAffineTransform(scaleX: 1, y: 1)
        }, completion: nil)
    }, completion: nil)
}

Answer 6

Я этого не делал, но я бы просто попытался создать CAAnimation, например. с CABasicAnimation и добавьте его в UITabBarItem, который вы хотите анимировать.

Подробнее о настройке CABasicAnimation см. В Руководстве по программированию базовой анимации: http://developer.apple.com/mac/library/documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/AnimatingLayers.html#//apple_ref/doc/uid/TP40006085-SW1