Uma tradução do artigo foi preparada especificamente para os alunos do curso ReactJS / React Native-Developer .
É difícil imaginar um aplicativo móvel no qual não haja animação. As animações na web geralmente são simples, se existirem (no máximo - uma página substitui a outra). Animações em aplicativos móveis requerem uma atenção completamente diferente.
O CSS3 possui uma API relativamente simples que permite fazer animações simples. Mas no React Native você não possui essa ferramenta. Sim, mesmo que fosse, então não seria suficiente.
Então, o que você precisa saber se está trabalhando com o React Native e precisa implementar animações completas?
O React Native possui uma ferramenta como o Animated, mas parece intimidadora ... pelo menos a princípio.
Portanto, existem três "grupos de coisas" ou "blocos", se você quiser, sobre os quais você precisa conhecer para trabalhar com animação.
Bloco 0: A Necessidade de Mudança
Animações são uma mudança de um estado para outro:
- Transição de "oculto" para "visível";
- Transição de um círculo para um quadrado.
Pense no que mostrar antes e depois da animação.
Pense nas transições e em quais estilos você precisa alterar para isso:
- O objeto deve aparecer com uma mudança na transparência ou deve "cair" de cima?
- O círculo deveria se transformar em um quadrado ou se tornar um triângulo no meio do processo?
Bloco 1: um estado visual conhecido como Animated.Value
Do ponto de vista lógico, qualquer componente pode ser mostrado ou oculto - esses são os significados de "verdadeiro" e "falso", não há meio termo. Como um estado, uma exibição se o objeto é mostrado como verdadeiro ou falso.
Em uma boa interface do usuário, os objetos não ocultam repentinamente e também não aparecem subitamente. Eles aparecem gradualmente, ajudando o usuário a entender a interface.
Assim, fica claro que o estado visual pode ser algo entre um estado verdadeiro e um estado falso.
Como assim?
Podemos introduzir outra variável para representar uma gama de estados visuais. Precisamos que este seja um número, porque, independentemente do estado lógico que temos, os números nos ajudam a representar valores intermediários.
this._shown = new Animated.Value(0);
Embora um estado lógico possa ser binário (ou seja,
true ou
false , 1 ou 0), o estado visual é um número de ponto flutuante.
Bloco 2: Transições conhecidas como Animated.timing
Digamos que algum componente esteja oculto: isso significa que o estado lógico de seus parâmetros de visibilidade será falso e o estado visual também será 0,0. Mas o que acontece quando queremos mostrar um componente? O estado lógico deve se tornar imediatamente verdadeiro, enquanto o estado visual deve passar gradualmente primeiro em 0,1, 0,2, ... e, finalmente, completamente em 1,0.
Para fazer isso, precisamos de uma maneira de dizer ao estado visual a transição para a 1.0.
E existem tais maneiras. De fato, existem ainda alguns.
A maneira mais fácil é basicamente:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
Aqui, dizemos
Animated para alterar
_shown para
1.0 no intervalo de 300 ms.
Existem outras transições e maneiras de organizar várias transições, mas agora podemos usar o
Animated.timing .
Bloco 3: Pixels conhecidos como Animated.View e interpolate
Nossas transições
_shown entre
0.0 e
1.0 não significam nada se não pudermos vê-las. Então, como fazemos isso?
De alguma forma, precisamos usar
_shown para definir a transparência do componente filho.
Suponha que tenhamos esse código antes de iniciar o trabalho com animações:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
Definimos a transparência como
0 quando ocultamos o componente e como
1 quando o mostramos.
Podemos usar o
Animated.Value e
_shown existentes para animar a transição de
0 para
1 ?
Animação de estilo
Podemos usar qualquer
Animated.Value quando trabalhamos com estilos.
Só precisamos alterar a
View para
Animated.View e agora temos o seguinte:
const opacity = this._shown;
Este não é um artigo sobre animações? Por que ainda não há fotos?
Mais uma coisa: interpolação
Essa palavra parece assustadora, mas a ideia em si é bastante simples. A interpolação nos permite manter um estado visual entre 0 e 1, mas dá a possibilidade de "corresponder" a outra coisa.
Digamos, em vez de apenas criar um componente herdado, queremos que nosso componente "saia de cima". E podemos fazer isso colocando o componente oculto 40px mais alto e animando seu movimento para a posição desejada, quando o estado muda para visível.
Podemos "combinar" nossos valores de 0 a 1 com valores de -40 a 0 usando a chamada de
interpolate usual:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
Isso criará um novo
Animated.Value , cujo valor será de -40 a 0.
Em outras palavras, será
-40 quando
_shown for
0 ,
-20 quando
_shown =
0.5 e
0 quando
_shown 1.0 .
Segredo sombrio: com interpolate você também pode alterar valores para cores e graus.Conclusões:
- O estado visual é um valor numérico, deve refletir a transição de um estilo para outro.
Animated.Value permite refletir o valor numérico do estado visual.Animated.timing pode ser usado para mover Animated.Value para outro número.Animated.Value pode ser usado para estilos ao substituir o View pelo Animated.View .
A interpolação permite mapear um intervalo de
Animated.Value para outro, por exemplo, um intervalo de
0 a
1 a um intervalo de
5 a
25 ou até mesmo um intervalo entre preto e verde.
Fontes:
Neste artigo, encontramos as primitivas de animação no React Native e adquirimos uma compreensão da idéia básica. Aqui você pode encontrar recursos para ajudá-lo a explorar esse tópico mais profundamente: