Créer une animation semblable à une application Breathe à l’aide de SwiftUI | de Nikhil Vinod | novembre 2022

Créez une animation similaire à l’application Breathe en utilisant offset changements, rotationEffect et scaleEffect

• Créez un ensemble de 2 cercles, un avec un décalage +ve et un avec un décalage -ve. Remarque : La valeur de décalage doit être égale au rayon du cercle.
  Ajoutez une variable d’état pour basculer Offset, rotationEffect et scaleEffect
• Créez à nouveau deux autres ensembles de 2 cercles avec les mêmes valeurs de décalage et ajoutez rotationEffect avec un degré qui est un multiplicateur d’incrémentation de 60
• Ajouter un scaleEffect modificateur à chaque ensemble de cercles
• Basculer la variable d’état dans un bloc d’animation d’inversion automatique

Nous allons commencer avec la vue principale en tant que ZStack, et dans ce ZStack, nous allons créer deux cercles, un avec un +ve Offset et un avec un -ve Offset. Nous ajouterons également une variable d’état stateAnimation qui sera utilisé pour basculer Offset, rotationEffect et scaleEffect .

Nous remplirons le cercle avec un LinearGradient avec une combinaison de couleurs bleues et blanches. La startPoint et endPoint de même dans l’ordre [.top, .bottom] pour le premier Cercle et le deuxième Cercle dans l’ordre [.bottom, .top].

Nous allons également changer l’opacité du ZStack enfant à 0,5 pour une meilleure apparence.

À ce stade, le code ressemblera à ce qui suit

Nous ajouterons 2 ensembles de cercles supplémentaires pour que les intersections ressemblent à une fleur à 6 pétales. Pour cela, nous allons utiliser un ForEach et itérer 2 fois et lui donner un rotationEffect qui est un multiplicateur de 60 à chaque itération.
Nous utiliserons également notre variable d’état pour basculer le rotationEffect de l’angle actuel à son angle de 0 degré réinitialisé pour lui donner l’apparence ci-dessous.

À ce stade, le code ressemblera à ce qui suit

Pour donner à cette application un aspect plus respirant, nous allons la réduire, puis l’agrandir avec l’animation. Pour cela, nous utiliserons simplement scaleEffect un modificateur dont la valeur sera à nouveau basculée à l’aide de la variable d’état. Nous passerons de la taille 0,2 à la taille 1 (taille de trame initiale).

.scaleEffect(startAnimation ? 1 : 0.2)

Nous utiliserons le code ci-dessus pour ajouter le scaleEffect modificateur à notre pile d’ensembles de cercles.

Nous animerons le tout en onAppear modificateur. Nous ajouterons le onAppear modificateur et à l’intérieur du onAppear modificateur nous ajouterons withAnimation bloc avec propriétés

animationtype = easeInOut 
repeat forever 
autoreverse = true 
speed = 0.1

Une fois la withAnimation block est défini, nous ajouterons le code pour basculer l’état var que nous avons créé comme la ligne de code ci-dessous.

startAnimation.toggle()

Maintenant, à chaque seconde, nous allons basculer le startAnimation . Et avec le changement de startAnimation value les valeurs des autres modificateurs changeront également.

Vous pouvez trouver le code final ci-dessous :

L’animation finale sera comme ci-dessous :

J’espère que vous avez compris comment nous pouvons utiliser le rotationEffect, offset and scaleEffect pour créer une animation similaire à l’animation de Breathe App.

Merci d’avoir lu.