UITabBarItem Icône d'animation

Question

app Skype pour les icônes iPhone utilise animé TabBar. Par exemple, lors de l'enregistrement dans l'icône onglet flèches droite affiche en circulation. Tout en appelant l'icône de l'onglet « Appel » clignote doucement qui se fait évidemment par l'animation.

Je me demande comment est-il possible aux icônes animés éléments de la barre d'onglets.

Dans mon cas particulier, lorsque l'utilisateur appuie sur le bouton « Favoris » il saute sur la barre onglet « Favoris » article. Je l'ai déjà mis en œuvre l'animation de saut, mais je voudrais l'icône de la barre d'onglet correspondant à clignoter à la fin de l'animation pour amener le sentiment de plénitude à elle.

Toutes les suggestions sur la direction que je devrais regarder dans?

Merci d'avance.

Answer 1

Je suis surpris de la facilité de la solution était!

Ajouter méthode à votre classe délégué application .m-fichier (ou toute autre classe qui gère votre UITabBar) contenant la routine suivante:

1. Créer un UIImageView qui sera utilisé pour l'animation.
2. Ajoutez à votre vue TabBar selon la méthode de addSubview:.
3. le cadrez à la taille de UITabBarItem (utilisation taille du cadre de UITabBar et le nombre d'éléments de la barre d'onglet pour calculer la taille du cadre).
4. Régler la valeur de frame.origin.x de imageView placer le droit à l'image ci-dessus l'élément de chauve-souris onglet que vous souhaitez animer.
5. Ajouter animation à la imageView (vous pouvez jouer avec l'opacité, échanger plusieurs images - tout ce que vous voulez)
.

Assez facile, pensez-vous pas?

Vous pouvez appeler cette méthode sur l'instance UIApplicationDelegate où vous devez animer l'élément de barre d'onglets.

En outre, il est important de noter que vous pouvez appuyer sur A travers le imageView pour sélectionner l'élément de barre d'onglets comme s'il n'y avait pas d'image sur la barre d'onglets. De nombreuses conclusions intéressantes peuvent être faites ici sur ce que vous pouvez faire si vous le connaissez ...

Answer 2

J'ai trouvé une meilleure solution à ce problème. Ajout d'affichage de l'image personnalisée n'est pas une meilleure approche parce que dans iOS 10.0 et plus tard de changer l'orientation de la position du cadre de l'icône et le texte modifié. Vous avez juste besoin de définir la classe de UITabBarController et mettre le code suivant.

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

En fait, il est beaucoup plus facile: https://medium.com/@werry_paxman/bring-your-uitabbar-to-life-animating-uitabbaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 4

Gardez à l'esprit que l'ordre des sous-vues dans le UITabBar peut être non ordonnée afin d'accéder au point correcte de l'aide d'un index peut ne pas fonctionner correctement comme Naresh réponse suggéré. Jetez un coup d'oeil à ce poste UITabBar subviews ordre de modification

La solution que je trouve est d'abord filtrer et trier les vues et ensuite accéder à l'aide de l'index correct du 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

Je n'ai pas fait cela, mais je voudrais juste essayer de construire une CAAnimation par exemple avec un CABasicAnimation et l'ajouter à la UITabBarItem que vous voulez animer.

Pour plus de détails sur la façon de mettre en place un CABasicAnimation voir le Guide de programmation Core Animation:

Vous pouvez animer les icônes en barre d'onglets se son point de vue, puis faire tout ce que vous aimez l'animation pour le UIView. Ci-dessous un exemple simple avec transformation de l'échelle, la joie!

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: pour chaque balise assign UITabBarItem pour

Answer 6

Answer 7

Answer 8

Vous pouvez animer les icônes en barre d'onglets se son point de vue, puis faire tout ce que vous aimez l'animation pour le UIView. Ci-dessous un exemple simple avec transformation de l'échelle, la joie!

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: pour chaque balise assign UITabBarItem pour

Answer 9

Answer 10

Answer 11