Desarrollo de iOS con Swift 2 - Animaciones

La animación es una parte importante de cualquier aplicación, ya que atrae la atención del usuario hacia la aplicación. La animación es solo una colección de imágenes que se repiten a un ritmo rápido. También hace que su aplicación sea diferente a las demás.

Hacer un proyecto de animación - Kitty Animation

Este será un proyecto simple, en el que ejecutaremos una animación cuando se haga clic en un botón. Usaremos múltiples imágenes para crear un GIF, así que descargue cualquier GIF y conviértalo en imágenes, lo que le dará múltiples marcos de ese GIF.

En esta sección, usaremos las siguientes imágenes.

Estas imágenes, cuando se reproducen juntas, crean una animación. Por lo tanto, haremos una aplicación de vista única. Luego arrastraremos una opción de vista de imagen, una etiqueta y un botón dentro del controlador de vista principal. Una vez hecho esto, conectaremos la vista de imagen y el botón a nuestro archivo rápido.

(Si no desea usar estas imágenes, busque cualquier gif y conviértalo a imagen en línea usando algún convertidor de gif a imagen).

Dentro de la acción del botón, insertaremos el siguiente comando para mostrar la imagen cuando se presiona un botón.

imageView.image = UIImage(named: "frame_0_delay-0.1s.gif") 
// frame_0_delay-0.1s.gif, is the name of image

Así es como asignamos una imagen mediante programación a una vista de imagen. La vista ahora debería verse como sigue:

La primera vista aparecerá cuando ejecutemos la aplicación. Cuando hacemos clic en el botón Animar, aparecerá la imagen.

Esta no es una animación, sino solo una imagen. Crearemos la animación ahora -

Agregue una variable debajo de la salida de la imagen: var counter = 1.

Vea que nuestras imágenes tienen un nombre común y solo un personaje es diferente. Cambie el código de su botón animado como se muestra a continuación:

@IBAction func animatePressed(_ sender: Any) { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-0.1s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Ahora, cuando presiona el animatebotón, la imagen cambia cada vez. El siguiente paso es crear lo siguiente:

  • Crea una variable - isAnimating y asignarle Falso.

  • Cree una variable de temporizador y asigne una Timer() función para ello.

Una vez que haya realizado los dos pasos anteriores, cree una función animada y pegue el siguiente código.

func animate() { 
   imageView.image = UIImage(named: "frame_\(counter)_delay-s.gif") 
   counter += 1 
   if counter == 9 { 
      counter = 0 
   } 
}

Donde, contador es nuestra variable de contador que hicimos en el archivo anterior. Ahora, dentro de la función del botón de animación, agregue el siguiente código:

if isAnimating { 
   timer.invalidate() 
   isAnimating = false 
} else { 
   timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: 
   #selector(ViewController.animate), userInfo: nil, repeats: true) 
   isAnimating = true 
}

Intente ejecutar la aplicación y veremos que se está ejecutando una animación en su dispositivo.

Challenge - Agregue un botón de parada que detendrá la animación.