UITabBarItem Icon Animation

Question

Skype aplicación para iPhone utiliza animado iconos de barra de pestañas. Por ejemplo, durante el registro en los más a la derecha pestaña icono shows circulante flechas. Mientras llama la "llamada" pestaña icono parpadea suavemente que obviamente hace a través de la animación.

Me pregunto cómo es posible que los iconos animados artículos barra de pestañas.

En mi caso particular, cuando el usuario presiona el botón 'Favorito' que salta sobre el elemento de la barra 'Favoritos' ficha. Ya he implementado la animación de salto, pero me gustaría que el icono de la barra de pestañas correspondientes a abrir y cerrar al final de la animación para traer la sensación de plenitud a la misma.

Cualquier sugerencia acerca de la dirección que debe buscar en?

Gracias de antemano.

Answer 1

Me sorprende lo fácil era la solución!

Agregar método a la clase .m-archivo Delegado (o cualquier otra clase que maneja su UITabBar) que contiene la siguiente rutina:

1. Crear una UIImageView que será utilizado para la animación.
2. Añadir a su vista TabBar utilizando el método addSubview:.
3. Enmárquelo hasta el tamaño de UITabBarItem (tamaño del marco UITabBar uso y el número de elementos de la barra de pestañas para calcular el tamaño de la trama).
4. Ajuste valor frame.origin.x del imageView para colocar la imagen de arriba a la derecha del elemento de ficha murciélago que desea animar.
5. Añadir animación que desea el imageView (se puede jugar con la opacidad, intercambiar varias imágenes - cualquier cosa que usted quiere)
.

Muy fácil, ¿no le parece?

Se puede llamar a este método en la instancia UIApplicationDelegate cualquier lugar que necesite para animar el elemento de la barra de pestañas.

También es importante tener en cuenta que se pueden grifo a través de la imageView para seleccionar el elemento barra de pestañas como si no hubiera ninguna imagen sobre la barra de pestañas. Muchas conclusiones interesantes se pueden hacer aquí en lo que puede hacer si lo conoce ...

Answer 2

He encontrado una mejor solución a este problema. La adición de vista de la imagen personalizada no es un enfoque mejor, porque en IOS 10.0 y posteriores en el cambio de la orientación de la posición y el icono del marco de texto cambiado. Sólo tiene que establecer la clase de UITabBarController y poner el siguiente código.

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 realidad no hay manera mucho más fácil: https://medium.com/@werry_paxman/bring-your-uitabbar-to-life-animating-uitabbaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 4

Tenga en cuenta que el orden de los subvistas en el UITabBar puede ser desordenada por lo que el acceso al artículo correcto de ella utilizando un índice puede no funcionar correctamente como Naresh respuesta sugeridos. Echar un vistazo a este UITabBar orden de cambio subvistas posterior

La solución que he encontrado es a primera filtrar y clasificar los puntos de vista y luego acceder a ella usando el índice correcto de la 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

No he hecho eso, pero me acaba de tratar de construir una CAAnimation por ejemplo, con un CABasicAnimation y añadirlo a la UITabBarItem desea ser animada.

Para obtener detalles sobre cómo configurar un CABasicAnimation visualizar la animación Core Guía de programación: http://developer.apple.com/mac/library/documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/AnimatingLayers.html#//apple_ref/doc/uid/TP40006085-SW1

Answer 6

Se puede animar barra de pestañas iconos por conseguir su punto de vista, a continuación, hacer lo que te gusta la animación como para la UIView. A continuación se muestra un ejemplo sencillo con la escala transformada, alegría!

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
                }
            })
        }
    }

PD: Por favor etiqueta de asignación para cada UITabBarItem con el fin