Table of Content

Réagissez avec l'application d'animation Apple Native du jour, partie II: Ouvrir l'image

[ad_1]



Dans ce billet, nous allons continuer là où nous l’avons laissé dans notre dernière partie de l’application Apple React Native du jour. Dans la première partie de cette partie du didacticiel, nous avons implémenté avec succès la transition de l'élément React Native Shared et configuré la partie interface utilisateur. Ici, nous allons mettre plus d’efforts dans l’animation. Nous voulons que la transition d’image et l’animation de sélection soient excellentes. Pour ce tutoriel, l’idée est de reproduire les images et de les afficher au-dessus d’un élément cible en utilisant une animation intéressante. Cette partie du didacticiel nous fournira des informations très intéressantes sur l’utilisation des animations dans React Native.

Alors commençons !!

Initialisation des variables

Tout d'abord, nous devons initialiser certaines variables pour stocker la position précédente des images et fournir la nouvelle position. Pour ce faire, nous devons utiliser le composant Animated fourni par le paquetage react-native. Ici, initialisez trois variables, position et dimensions oldPosition, comme indiqué dans le fragment de code ci-dessous:

  this  .oldPosition = {};  // maintenir les coordonnées de l'ancien élément 
this .position = new Animated.ValueXY (); // est utilisé pour l'animation de configuration à la position
this .dimensions = new Animated.ValueXY (); // utilisation de la configuration d'animation en taille

Comme indiqué dans l'extrait de code ci-dessus:

  oldPosition 
pour stocker l'ancien élément coordonné.
  position [19659011] La méthode ValueXY du composant animé pour la position est initialisée. 
  dimensionsis 
est initialisé à la méthode ValueXY du composant animé pour la taille.

Création d'une fonction pour ouvrir l'image

Dans cette étape, nous allons définir une fonction appelée openImage qui reçoit un index d'image en tant que paramètre et configure l'ancienne position et la taille, ainsi que la nouvelle position. La fonction contenant le code permettant de configurer la position et la taille de l'image d'index est fournie dans l'extrait de code ci-dessous:

  openImage =   index  =>  {
this .allImages [index] .measure ( ( x, y, largeur, hauteur, pageX, pageY ) => {
this .oldPosition.x = pageX;
this .oldPosition.Y = pageY;
this .oldPosition.width = width;
this .oldPosition.height = height;

this .position.setValue ({ x : pageX, et : pageY,});
this .dimensions.setValue ({ x : largeur, et : hauteur,});
});
Dans l'extrait de code ci-dessus, nous identifions l'objet image à l'aide de la valeur d'index. Ensuite, à l'aide de la méthode Measure, nous obtenons la coordonnée de l'image et la définissons à la coordonnée actuelle. Lorsque nous voulons ramener l'image à l'emplacement précédent, nous utilisons la variable oldPosition.

Ensuite, nous devons associer la fonction openImage à l'événement onPress du composant TouchableWithoutFeedback, comme indiqué dans l'extrait de code ci-dessous:

    this  .openImage (index)}> 

Implémentation de superposition

Nous allons maintenant créer une superposition d'image de copie sur l'image sélectionnée. Pour ce faire, nous devons placer un composant View avec une copie de l'image d'origine après le composant ScrollView dans notre fichier App.js.

Commençons par créer un lien de style View avec absoluteFillObjects indiqué dans le code d'extrait ci-dessous:

  < / ScrollView>
<See style = {StyleSheet.absoluteFillObject} </
Voir>

Nous obtenons donc le résultat suivant sur notre écran d'émulateur:

Comment pouvons-nous voir dans l'extrait de code ci-dessus, la nouvelle vue bloque toutes les vues et nous ne pouvons rien faire.

Pour résoudre ce problème, nous allons utiliser l'état activeImage pour basculer EVENTprop sur auto ou none, comme indiqué dans l'extrait de code ci-dessous:

  <View style = {StyleSheet.absoluteFillObject} pointerEvents = { this  .state.activeImage?  & # 39; auto & # 39; :  & # 39; none & # 39; }> 

Nous obtenons donc le résultat suivant sur notre écran d'émulateur:

[19659002] Mais comme on peut le voir dans la simulation de l'émulateur précédent, nous ne pouvons pas faire défiler l'écran lorsque nous cliquons ou touchons la image

Paramètres de superposition

Ensuite, nous allons ajouter deux composants d'affichage avec un style flexible pour contenir l'image et le texte, comme indiqué dans l'extrait de code ci-dessous:

  <Style de vue = {{ flex :  2 }>   </  Voir > 
<Style de la vue = {{ flex : ] 1 }}> </ View >

Ensuite, nous allons ajouter le composant Animated.Image au premier composant View, comme indiqué dans l'extrait de code a. suite:

  <Style de style = {{ flex :  2 }} ref = {view => ( this  .viewview Image = view)}>
< Animated.Image
source = { this.state.activeImage ? this.state.activeImage.src : null }
style = {[ { resizeMode: & [399024] cover
& # 39; haut : 0 ] left: 0 height: null width: null ,},]}
>
</ Image animée >
</ Voir >

<Voir style = {{ flex : 1 }}> </ Voir >

Dans l'extrait de code ci-dessus, nous affectons la source au composant image en fonction de l'état d'actactiveImage. Si true, nous affectons une source de l'image au composant Image. Ensuite, nous lions les styles pour coller l’image répliquée en haut de l’écran.

Nous devons maintenant ajouter un style d'animation au composant Image animée. Pour cela, nous définissons une constante appelée activeImageStyle avec les paramètres de taille indiqués dans le fragment de code ci-dessous:

  render () {
const activeImageStyle = {
width : this .dimensions.x,
height : this .dimensions.and,
sont partis : ce .position.x,
ci-dessus : ce .position.y,
};

Nous devons donc associer activeImageStyle au tableau d'accessoires de style du composant Image animée, comme indiqué dans l'extrait de code ci-dessous:

  <Animated.Image
source = { this .state.activeImage? this .state.activeImage.src: null }
style = {[{ resizeMode : & # 39; cache & # 39; top : 0 à gauche : 0 hauteur : null largeur : null ],},
activeImageStyle,
]}>
</ Animated.Image >

Nous obtenons donc le résultat suivant sur notre écran d'émulateur:

[19659002] Comme on peut le voir dans la simulation de l'émulateur précédent, les angles de l'écran va changer et la bordure apparaîtra lorsque vous cliquez sur l'image.

Toutefois, l'image répliquée n'est pas agrandie en tant que couverture, à l'écran. [19659025] Pour résoudre ce problème, nous devons d'abord obtenir la référence au composant View principal à l'aide de l'accessoire de référence, comme indiqué dans l'extrait de code ci-dessous:

nous connectons l'objet View principal en ajoutant ref

  < Style view = {{ flex :  2 }}
ref = {view => ( this .viewImage = view)}>
< Image.animée >

Nous pouvons maintenant obtenir la taille de la vue principale. En conséquence, nous pouvons maintenant agrandir l'image pour qu'elle s'adapte à l'écran. Nous ferons cela en activant l'animation lorsque l'image sera agrandie.

Activation de l'animation

Pour activer l'animation, nous devons revenir à la fonction openImage. Ensuite, nous devons définir l’index d’image actuel sur état. Après cela, nous pouvons utiliser le rappel pour activer l'animation. Le code à implémenter est fourni dans l'extrait de code ci-dessous:

  this  .setState ({ activeImage : images [index]}, () => {
this .viewImage.measure ( ( dx, dy, dWidth, dHeight, dPageX, dPageY ) => {
Animated.parallel ([
Animation.timing (
this .position.x,
{ à la valeur : dPageX, durée : 300 ,}
),
Animation.timing (
this .position.y,
{ à la valeur : dPageY, durée : 300 ,}
),
Animation.timing (
this .dimensions.x,
{ à la valeur : dWidth, durée : 300 ,}
),
Animation.timing (
this .dimensions.y,
{ à la valeur : dHeight, durée : 300 ,}
),
]) .start ();
});
}

Ici, nous mesurons la variable viewImage qui contient les données de vue parent. Ensuite, nous créons l'animation avec la fonction de minutage fournie par le composant Animated qui rend la taille de l'image agrandie égale à la vue principale.

Par conséquent, le résultat final est fourni dans la simulation de l'émulateur ci-dessous:

Nous avons donc réussi à implémenter l'animation d'agrandissement en cliquant sur une image. à l'écran

Conclusion

Dans cette deuxième partie de notre didacticiel, nous continuons à partir de l’endroit où nous l’avions laissé dans la première partie. Par conséquent, il est suggéré de parcourir la première partie pour obtenir une vue complète. Ici, nous avons appris à démarrer l’animation dans l’application React Native. Nous avons également obtenu un guide détaillé sur la manière de collecter les données de coordonnées de l'élément à l'aide de la méthode Measure. Cette partie nous a également aidé à savoir comment utiliser plusieurs animations en même temps. Dans la prochaine partie, nous allons apprendre à masquer un élément et à afficher la section de texte.

Crédit

Et l'image est acquise auprès d'Unsplash.

Divulgation

Cette publication contient des liens affiliés. Je peux recevoir une compensation si j'achète des produits ou services
à partir des différents liens fournis dans cet article.












[ad_2]

Post a Comment