Une traduction de l'article a été préparée spécialement pour les étudiants du cours ReactJS / React Native-Developer .
Il est difficile d'imaginer une application mobile dans laquelle il n'y a pas d'animation. Les animations sur le Web sont généralement simples, si elles existent (maximum - une page en remplace une autre). Les animations dans les applications mobiles nécessitent une attention complètement différente.
CSS3 possède une API relativement simple qui vous permet de créer des animations simples. Mais dans React Native, vous ne disposez pas de cet outil. Oui, même si c'était le cas, ce ne serait pas suffisant.
Alors, que devez-vous savoir si vous travaillez avec React Native et que vous devez implémenter des animations à part entière?
React Native a un outil comme Animated, mais il semble intimidant ... au moins au début.
Il y a donc trois «groupes de choses» ou «blocs» si vous le souhaitez, que vous devez connaître afin de travailler avec l'animation.
Bloc 0: Le besoin de changement
Les animations sont un changement d'un état à un autre:
- Transition de «caché» à «visible»;
- Transition d'un cercle à un carré.
Pensez à ce qu'il faut montrer avant et après l'animation.
Pensez aux transitions et aux styles que vous devez changer pour cela:
- L'objet doit-il apparaître avec un changement de transparence, ou doit-il simplement «tomber» d'en haut?
- Le cercle doit-il simplement se transformer en carré, ou doit-il devenir un triangle au milieu du processus?
Bloc 1: Un état visuel appelé Animated.Value
D'un point de vue logique, n'importe quel composant peut être affiché ou caché - ce sont les significations de «vrai» et «faux», il n'y a pas de compromis. En tant qu'état, un affichage indiquant si l'objet est affiché comme étant vrai ou faux.
Dans une bonne interface utilisateur, les objets ne se cachent pas soudainement et n'apparaissent pas non plus soudainement. Ils apparaissent progressivement, aidant l'utilisateur à comprendre l'interface.
Ainsi, il devient clair que l'état visuel peut être quelque chose entre un vrai état et un faux état.
Comment ça?
Nous pouvons introduire une autre variable pour représenter une gamme d'états visuels. Nous avons besoin que ce soit un nombre, car quel que soit l'état logique que nous avons, les nombres nous aident à représenter des valeurs intermédiaires.
this._shown = new Animated.Value(0);
Alors que l'état logique peut être binaire (c'est-à-dire
true ou
false , 1 ou 0), l'état visuel est un nombre à virgule flottante.
Bloc 2: Transitions connues sous le nom de Animated.timing
Supposons qu'un composant soit masqué: cela signifie que l'état logique de ses paramètres de visibilité sera faux et que l'état visuel sera également 0,0. Mais que se passe-t-il lorsque nous voulons montrer un composant? L'état logique devrait devenir immédiatement vrai, tandis que l'état visuel devrait progressivement passer d'abord à 0,1, 0,2, ... et enfin complètement à 1,0.
Pour ce faire, nous avons besoin d'un moyen de dire à l'état visuel la transition vers 1.0.
Et il existe de telles façons. En fait, il y en a même quelques-uns.
La manière la plus simple est essentiellement:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
Ici, nous disons
Animated pour changer
_shown en
1.0 dans l'intervalle de 300 ms.
Il existe d'autres transitions et façons d'organiser plusieurs transitions, mais nous pouvons maintenant utiliser
Animated.timing .
Bloc 3: Pixels connus sous le nom d' Animated.View et interpolate
Nos transitions
_shown entre
0.0 et
1.0 ne signifient rien si nous ne pouvons pas les voir. Alors, comment faisons-nous cela?
Nous devons en quelque sorte utiliser
_shown pour définir la transparence du composant enfant.
Supposons que nous disposions de ce code avant de commencer à travailler avec des animations:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
Nous mettons la transparence à
0 lorsque nous masquons le composant et à
1 lorsque nous le montrons.
Pouvons-nous utiliser les
Animated.Value et
_shown existants pour animer la transition de
0 à
1 ?
Animation de style
Nous pouvons utiliser n'importe quelle valeur
Animated.Value lorsque nous travaillons avec des styles.
Nous avons juste besoin de changer la
View vue
Animated.View , et maintenant nous avons ce qui suit:
const opacity = this._shown;
N'est-ce pas un article sur les animations? Pourquoi n'y a-t-il toujours pas de photos?
Encore une chose: l'interpolation
Ce mot semble effrayant, mais l'idée elle-même est assez simple. L'interpolation nous permet de maintenir un état visuel entre 0 et 1, mais donne la possibilité de «faire correspondre» quelque chose d'autre.
Disons que, au lieu de simplement créer un composant hérité, nous voulons que notre composant "abandonne par le haut". Et nous pouvons le faire en plaçant le composant caché 40 pixels plus haut et en animant son mouvement à la position souhaitée, lorsque l'état devient visible.
Nous pouvons «faire correspondre» nos valeurs de 0 à 1 avec des valeurs de -40 à 0 en utilisant l'appel d'
interpolate habituel:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
Cela créera une nouvelle valeur
Animated.Value , dont la valeur sera de -40 à 0.
En d'autres termes, ce sera
-40 lorsque
_shown est
0 ,
-20 lorsque
_shown =
0.5 et
0 lorsque
_shown 1.0 .
Dark secret: avec interpolate vous pouvez également modifier les valeurs des couleurs et des degrés.Conclusions:
- L'état visuel est une valeur numérique, il doit refléter la transition d'un style à un autre.
Animated.Value vous permet de refléter la valeur numérique de l'état visuel.Animated.timing peut être utilisé pour déplacer Animated.Value vers un autre nombre.Animated.Value peut être utilisé pour les styles lors du remplacement de View par Animated.View .
L'interpolation vous permet de mapper une plage de
Animated.Value à une autre, par exemple une plage de
0 à
1 une plage de
5 à
25 ou même une plage entre le noir et le vert.
Sources:
Dans cet article, nous avons rencontré les primitives de l'animation dans React Native et acquis une compréhension de l'idée de base. Vous trouverez ici des ressources pour vous aider à approfondir ce sujet: