2010-08-19 15 views
11

La aplicación Skype para iPhone usa iconos animados de TabBar. Por ejemplo, durante el inicio de sesión, el icono de la pestaña de la derecha muestra flechas circulantes. Mientras llama al icono de la pestaña "Llamar" parpadea suavemente, lo que obviamente se hace a través de la animación.UITabBarItem Icon Animation

Me pregunto cómo es posible animar los iconos de elementos de la barra de pestañas.

En mi caso particular, cuando el usuario presiona el botón 'Favorito', salta a la barra de pestañas 'Favoritos'. Ya he implementado la animación de salto, pero me gustaría que el ícono de la barra de pestañas correspondiente parpadee al final de la animación para darle la sensación de estar completo.

¿Alguna sugerencia sobre la dirección en la que debo mirar?

Gracias de antemano.

+0

¿Cómo se implementa la animación de salto? –

+0

Me gusta [RAMAnimatedTabBarController] (https: // cocoapods.org/pods/RAMAnimatedTabBarController) –

Respuesta

11

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

Agregar método para su aplicación .m-archivo de clase Delegate (o cualquier otra clase que maneja su UITabBar) que contiene la siguiente rutina:

  1. Crear UIImageView que será utilizado para la animación.
  2. Agréguelo a su vista TabBar utilizando el método addSubview:.
  3. Encuadre hasta el tamaño de UITabBarItem (use el tamaño de fotograma de UITabBar y el número de elementos de la barra de pestañas para calcular el tamaño del fotograma).
  4. Ajuste el valor frame.origin.x de imageView para colocar la imagen justo encima del elemento tab que desea animar.
  5. Agregue la animación que desee a la vista de imagen (puede reproducir con opacidad, cambiar varias imágenes, cualquier cosa que desee).

Bastante fácil, ¿no crees?

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

También es importante observar que puede pulsar A TRAVÉS de la vista de imagen para seleccionar el elemento de la barra de pestañas como si no hubiera una imagen sobre la barra de pestañas. Muchas conclusiones interesantes se pueden hacer aquí en lo que puede hacer si lo conoce ...

+0

Esto no funcionará con el ancho dinámico de UITabBar. –

0

No he hecho eso pero solo trataría de crear una CAAnimation, p. con una CABasicAnimation y agréguela al UITabBarItem que desea animar.

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

+0

Nah, estoy seguro de que esto no funcionará porque UITabBarItem no es un tipo de vista: se origina en NSObjest (clase básica) y UIBarItem (nada interesante también). Parece que no hay Capa o incluso marco para jugar. Pero he logrado resolver este problema ingresando la 'puerta trasera'. Gracias por su idea, aunque –

0

Puede animar los iconos de barra de pestañas por conseguir su punto de vista, a continuación, hacer lo animación como te gusta para la UIView. A continuación se muestra un ejemplo simple con la transformación de escala, ¡ánimo!

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 asignar etiqueta para cada UITabBarItem con el fin