Иконка Уитаббаритм анимация

Question

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

Интересно, как можно оживить иконки вкладышащих элементов вкладки.

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

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

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

Answer 1

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

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

1. Создайте UiimageView, который будет использоваться для анимации.
2. Добавьте его в свой вид Tabbar, используя addSubview: метод.
3. Сделайте его до размера UITABBARITEM (используйте размер кадра UITABBAR и количество элементов вкладок для расчета размера кадра).
4. Отрегулируйте ImageView's frame.origin.x Значение Чтобы разместить изображение прямо над элементом Tab Bat, вы хотите оживить.
5. Добавьте анимацию, которую вы хотите, чтобы ImageView (вы можете играть с непрозрачностью, поменяйте несколько изображений - все, что вы хотите).

Довольно легко, ты так не думаешь?

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

Также важно отметить, что вы можете нажать через 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

На самом деле есть гораздо проще: https://medium.com/@warre_paxman/bring-your-uitbar-to-tom-life-animating-wavaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 4

Имейте в виду, что порядок подвалов в Uitabbar может быть неупорядован, поэтому доступ к правильному элементу из него с использованием индекса может работать неправильно, как Нареш отвечает предложенный. Посмотрите на этот пост Порядок изменений в Uitabbar

Раствор, который я нашел, - это первый фильтр и сортировать представления, а затем получить доступ к нему, используя правильный индекс 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 5

Я не сделал этого, но я бы просто попытался построить канимацию, например, с кабасимацией и добавить его в Uitabbaritem, вы хотите оживить.

Для получения подробной информации о том, как настроить кабасиманимацию См. Основное руководство по программированию о анимации:http://developer.apple.com/mac/library/documentation/cocoa/Coneptual/coreanimation_guide/articles/animatinglayers.html#//apple_ref/doc/uid/tp40006085-ssw1.

Answer 6

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

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 в порядке