Développement iOS avec Swift 2 - Animations

L'animation est une partie importante de toute application car elle attire l'attention de l'utilisateur sur l'application. L'animation est juste une collection d'images qui se répètent à un rythme rapide. Cela rend également votre application différente des autres.

Créer un projet d'animation - Kitty Animation

Ce sera un projet simple, dans lequel nous exécuterons une animation lorsqu'un bouton est cliqué. Nous utiliserons plusieurs images pour créer un GIF, alors téléchargez n'importe quel GIF et convertissez-le en images, ce qui vous donnera plusieurs images de ce GIF.

Dans cette section, nous utiliserons les images suivantes.

Ces images, lorsqu'elles sont lues ensemble, créent une animation. Par conséquent, nous allons faire une application à vue unique. Nous allons ensuite faire glisser une option d'affichage d'image, une étiquette et un bouton à l'intérieur du contrôleur de vue principale. Une fois cela fait, nous connecterons la vue image et le bouton à notre fichier swift.

(Si vous ne souhaitez pas utiliser ces images, recherchez un gif et convertissez-le en image en ligne à l'aide d'un convertisseur de gif en image.)

À l'intérieur de l'action du bouton, nous insérerons la commande suivante pour afficher l'image lorsqu'un bouton est enfoncé.

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

C'est ainsi que nous attribuons par programmation une image à une vue d'image. La vue devrait maintenant ressembler à ceci -

La première vue apparaîtra lorsque nous exécuterons l'application. Lorsque nous cliquons sur le bouton Animer, l'image apparaît.

Ce n'est pas une animation, mais juste une image. Nous allons créer l'animation maintenant -

Ajoutez une variable sous la sortie d'image: var counter = 1.

Voyez que nos images ont un nom commun et qu'un seul caractère est différent. Changez le code de votre bouton d'animation comme indiqué ci-dessous -

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

Maintenant, lorsque vous appuyez sur le animatebouton, l'image change à chaque fois. L'étape suivante consiste à créer ce qui suit -

  • Créer une variable - isAnimating et attribuez-lui False.

  • Créez une variable de minuterie et attribuez un Timer() fonction à elle.

Une fois les deux étapes ci-dessus terminées, créez une fonction animée et collez le code suivant.

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

Où, compteur est notre variable de compteur que nous avons créée dans le fichier précédent. Maintenant, dans la fonction de bouton animer, ajoutez le code suivant -

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 
}

Essayez d'exécuter l'application et nous verrons qu'une animation est en cours d'exécution sur votre appareil.

Challenge - Ajoutez un bouton d'arrêt qui arrêtera l'animation.