UITabBarItem Icona Animazione

Question

Skype app per iPhone utilizza animato icone TabBar. Ad esempio, durante la registrazione in più a destra scheda icona mostra frecce circolanti. Durante la chiamata la "chiamata" scheda icona lampeggia dolcemente che ovviamente è fatto attraverso l'animazione.

Mi chiedo come è possibile icone animate articoli barra delle schede.

Nel mio caso particolare quando l'utente preme il pulsante 'Preferito' salta sulla voce della barra 'Preferiti' scheda. Ho già implementato l'animazione saltare, ma vorrei che la barra delle schede sull'icona corrispondente al batter alla fine dell'animazione per portare la sensazione di completezza ad esso.

Qualche suggerimento sulla direzione dovrei guardare in?

Grazie in anticipo.

Answer 1

Io sono sorpreso quanto sia facile la soluzione era!

Aggiungi metodo per il tuo .m-file di classe Application Delegato (o qualsiasi altra classe che gestisce il vostro UITabBar) che contiene le seguenti impostazioni:

1. Crea un UIImageView che verrà utilizzato per l'animazione.
2. Aggiungi al tuo vista TabBar utilizzando il metodo addSubview:.
3. Creala fino alle dimensioni di UITabBarItem (uso UITabBar telaio e il numero di elementi della barra delle schede per calcolare la dimensione del frame).
4. Regolare il valore frame.origin.x del ImageView per posizionare l'immagine a destra sopra la voce di scheda mazza da animare.
5. Aggiungi animazione da l'ImageView (si può giocare con l'opacità, scambiare diverse immagini - tutto quello che vuoi)
.

Abbastanza facile, non vi pare?

È possibile chiamare questo metodo su istanza UIApplicationDelegate ovunque sia necessario per animare la voce scheda bar.

Inoltre è importante notare che è possibile toccare attraverso l'ImageView per selezionare la voce barra delle schede, come se non ci fosse alcuna immagine sopra la barra delle schede. Molti interessanti conclusioni possono essere fatte qui su cosa si può fare se si sa che ...

Answer 2

Ho trovato una soluzione migliore a questo problema. Aggiunta visualizzazione dell'immagine personalizzata non è un approccio migliore perché in IOS 10.0 e successivamente modificando l'orientamento della posizione icona telaio e testo modificato. Hai solo bisogno di impostare la classe di UITabBarController e inserire il seguente codice.

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

In realtà non v'è modo molto più semplice: https://medium.com/@werry_paxman/bring-your-uitabbar-to-life-animating-uitabbaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 4

Tenete a mente che l'ordine delle subviews nel UITabBar può essere ordinata in modo da accedere alla voce corretta da esso utilizzando un indice potrebbe non funzionare correttamente come Naresh risposta suggerito. Date un'occhiata a questo post UITabBar subviews ordine di modifica

La soluzione che ho trovato è quello primo filtro e ordinare le viste e poi accedere mediante l'indice corretto del 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

Non ho fatto questo, ma vorrei solo cercare di costruire un CAAnimation esempio con un CABasicAnimation e aggiungerlo al UITabBarItem si desidera essere animato.

Per ulteriori dettagli su come impostare un CABasicAnimation vedere il Core Animation Guida di programmazione: http://developer.apple.com/mac/library/documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/AnimatingLayers.html#//apple_ref/doc/uid/TP40006085-SW1

Answer 6

È possibile animare TabBar icone ottenendo la sua vista, quindi fare quello dell'animazione come ti piace per l'UIView. Di seguito è riportato un esempio semplice con scala trasformare, allegria!

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: tag assegnare per ogni UITabBarItem al fine