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 position [19659011] La méthode ValueXY du composant animé pour la position est initialisée. dimensionsis 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,});
}); 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
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]