. L’idée est de compléter d’abord la section de texte pour la partie agrandie, puis d’implémenter l’animation rapprochée de l’image agrandie.
Alors commençons!
Ajout de la description du contenu
Dans la deuxième partie du didacticiel, nous avons créé deux composants Vista. L'une avec la valeur flexible 2 et l'autre avec la valeur flexible égale à 1. Dans la vue de dessus, nous ajoutons l'image copiée qui apparaît avec une animation agrandie lorsque vous cliquez dessus. Nous travaillons maintenant sur le deuxième composant View pour ajouter la section de contenu.
Premièrement, nous devons définir une variable d'animation initialisée à 0 dans la valeur animée, comme indiqué dans l'extrait de code ci-dessous:
constructeur (accessoires) {
super (accessoires);
.....
this.animation = new Animated.Value (0);
this.state = {
activeImage: null,
} ;
} Ajout de contenu et de styles
Dans cette étape, nous allons ajouter du contenu au second composant View à l'aide du composant Text, puis ajouter quelques styles à la vue, ainsi qu'un composant de texte. Ensuite, nous devons changer le composant View normal en composant View animé. Le code et les styles nécessaires pour implémenter cela sont fournis dans l'extrait de code ci-dessous:
& lt ; Animé Voir style = {{flex: 1, backgroundColor: & # 39; white & # 39; Remplir: 20, remplir en haut: 50}} & gt ;
& lt ; Style de texte = {{fontSize: 24, paddingBottom: 10}} & gt ; Développeur très sûr & lt ; / Texte & gt ;
& lt ; Texte & gt ; Eiusmod consectetur cupidatat douleur Lorem excepteur excepteur. Nostrud sint officia consectetur eu pariatur laboris est velit. Laborum non cupidatat qui ut sit dolore proident. & lt ; / Texte & gt ;
& lt ; / Animé. Voir & gt ; Par conséquent, nous obtenons le résultat suivant sur l'écran de l'émulateur en cliquant sur n'importe quelle image:
Ajouter une animation
Dans cette étape, nous allons ajouter l'animation en fondu. à la section Texte. L'idée est de faire en sorte que la section de texte apparaissant en dessous soit atténuée. Pour ce faire, nous devons définir deux styles d'animation opaques et translatés, ce qui aidera à résoudre cet effet d'animation. Pour configurer l'animation, nous allons utiliser la méthode d'interpolation initialisée avec la constante animatedContentY prenant un objet avec deux propriétés: inputRange et outputRange, comme indiqué dans le fragment de code ci-dessous:
const animatedContentY = ceci .animation. int erpolate ({
inputRange: [ 0 1 ],
outputRange: [ -150 0 ]
}) Pour comprendre le fonctionnement de inputRange et outputRange, associons la valeur de deux propriétés, comme indiqué ci-dessous:
0 et -150, où 0 = 0% signifie que l'animation ne démarre pas. lorsque la position est définie sur -150.1 et 0, où 1 = l'animation moyenne à 100% est terminée et la position revient à l'original.
Ensuite, nous initialisons également la méthode d'interpolation sur la constante animéeContentOpacité pour l'effet d'opacité, comme indiqué dans l'extrait de code ci-dessous:
const animatedContentOpacity = ce . . int erpolate ({
inputRange: [ 0 0.5 1 ],
outputRange: [ 0 1 1 ]
}) Ici, nous voulons montrer une opacité de 100% lorsque l'animation atteint 50% afin que inputRange et outputRange fonctionnent correctement.
Maintenant, nous devons terminer cette section en ajoutant les constantes animatedContentY et animatedContentOpacity à la constante animatedContentStyle en tant qu'objet. La constante animatedContentStyle est définie en tant qu'objet prenant deux valeurs d'animation qui sont l'opacité et la transformation. L'opacité est initialisée dans animatedContentOpacity et la transformation est initialisée dans un tableau d'objets dont la valeur de traduction est animatedContentY, comme indiqué dans l'extrait de code ci-dessous:
const animatedContentStyle = {
opacity : AnimatedContentOpacity,
transform : [
{
translation : animatedContentY,
]
]
}; ] Nous devons maintenant ajouter la constante animatedContentStyle à la gamme d'accessoires de style, comme indiqué dans l'extrait de code ci-dessous:
& lt ; Animé Voir
style = {[
{
flex: 1,
backgroundColor: & # 39; white & # 39;
rembourrage: 20
remplissage: 50,
},
animatedContentStyle,
]} & gt ;
& lt ; Style de texte = {{fontSize: 24, paddingBottom: 10}} & gt ;
Développeur très sûr
& lt ; / Texte & gt ;
& lt ; Texte & gt ;
Eiusmod consectetur cupidatat douleur Lorem excepteur excepteur.
Nostrud sint officia consectetur eu pariatur laboris est velit.
Laborum non cupidatat qui ut sit dolore proident.
& lt ; / Texte & gt ;
& lt ; / Animé. Voir & gt ; Enfin, nous devons activer l'animation dans la fonction openImage que nous avons définie dans la partie précédente. La variable d'animation est fournie en tant que paramètre pour la fonction de temporisation du composant animé avec toValue égal à 1 et une durée de 300 ms, comme indiqué dans l'extrait de code ci-dessous:
Animated.parallel ([
...........
Animation.timing (this.animation, {
Valeur: 1 ,
durée: 300 ,
}),
]). start (); Nous obtenons donc le résultat suivant sur notre écran d'émulateur:
Terminez l'animation de fermeture
La dernière chose à ajouter est l'animation près de notre image agrandie déroulante. . Pour ce faire, nous devons définir une nouvelle fonction appelée closeImage. La fonction closeImage est configurée avec toutes les propriétés animées requises pour fermer l'élément image, comme indiqué dans l'extrait de code ci-dessous:
closeImage = () = & gt; {
Animated.parallel ([
Animation.timing (this.position.x, {
toValue : this .oldPosition .x ,
durée: 300
}),
Animated .timing (this .position .y {
toValue: this .oldPosition .y ,
durée: 250
}),
Animated .timing (this .dimensions .x {{
toValue: this .oldPosition .width ,
durée: 250
}),
Animated .timing (this .dimensions .y {{
toValue: this .oldPosition .height ,
durée: 250
}),
Animated .timing (this .animation {
Valeur: 0
durée: 250
})
]) .start (() = & gt; {
this.setState ({
activeImage : null
})
})
} L'idée de l'implémentation de la fonction closeImage est d'ajouter les mêmes propriétés d'animation de la fonction openImage que nous avons définies dans le dernier tutoriel. Et ensuite, nous rembobinons les positions d'animation aux positions d'origine en utilisant la valeur que nous stockons dans la variable oldPosition. Ensuite, lorsque l'animation démarre, nous devons définir l'état activeImage sur null.
Enfin, nous devons ajouter le bouton de fermeture (X) pour activer la fonction closeImage. Pour implémenter le bouton de fermeture, nous plaçons une lettre "X" dans le composant Texte entouré par le composant Vue animée. Ensuite, nous devons ajouter le composant TouchableWithoutFeedback qui englobe le composant Vue animée afin que le texte puisse être cliqué. Enfin, nous ajoutons la fonction closeImage à l'événement onPress du composant TouchableWithoutFeedback. Ensuite, nous devons lier ces composants à certains styles pour qu’ils apparaissent dans le coin supérieur droit. Le code et les styles requis pour implémenter le bouton de fermeture sont fournis dans l'extrait de code ci-dessous:
& lt ; TouchableWithoutFeedback onPress = {() = & gt ; this.closeImage ()} & gt ;
& lt ; Animation Voir style = {{position: & # 39; absolu & # 39; ci-dessus: 30, à droite: 30}} & gt ;
& lt ; Style de texte = {{fontSize: 24, fontWeight: & # 39; bold & # 39; color: & # 39; white & # 39; }} & gt ; X & lt ; / Texte & gt ;
& lt ; / Animé. Voir & gt ;
& lt ; / TouchableWithoutFeedback & gt ; Par conséquent, nous obtenons le résultat suivant sur notre écran d'émulateur:
[19659002] Maintenant, nous testons également la même chose avec d'autres images et le résultat est affiché dans la simulation d'émulateur ci-dessous: 
Par conséquent, nous avons ajouté avec succès la section de texte et implémenté l'animation à proximité dans notre application React Native.
Conclusion
Ce tutoriel représente un tiers de notre implémentation de l'exemple d'application Apple du jour dans React Native. Dans cette partie du didacticiel, nous avons appris à ajouter du texte et à configurer différentes propriétés d'animation. Nous avons également appris à relier différents styles à des composants. Ensuite, nous avons finalement implémenté l'animation à proximité de notre élément contextuel d'image agrandie du didacticiel précédent.
Si vous aimez ce tutoriel, laissez des commentaires dans la section commentaires et n'oubliez pas de partager!
Crédit
[ad_2]