Animações do After Effects no React Native com Lottie | Code/Drops #04


[…] this basically has no boundaries,
we can use this part of the animations of After Effects for many things […] [♫] Hey dev! If there is something that I think
is really cool on mobile applications, it’s the animations that we can build. And with React Native, it’s no different. But… only the animations we can
do based on the user’s gestures, or only the elements moving for me it’s not enough. So, imagine that we could create
for example an animation in a software made for animations,
for example the After Effects, so we can make any kind of animation, import this to React Native, in an extremely light way, or even better, using just JSON. Yes, we can use a data structure, uhm… made for any kind of data
that we use to inter– to… send information between the
front end and the back end, to use it as an animation inside
React Native, Look how crazy it is. Basically because After Effects, it can
export an animation in a JSON format, and in this JSON, it has all the steps
that the animation needs to go through in order to move, or which are the colors that for
example have that animation, that drawing, uhm… the steps that the animation goes through, if it is a little doll, it is walking, then it changes
to this position, in this period of time, so inside this JSON is all the data of our animation, kinda just like we have for example on an SVG for web, when we are
working with a picture, alright? Well, here, inside React Native, the guys from Airbnb developed a tool called “Lottie”, so, let me put it to record my screen, but this Lottie, then, it was migrated to the React Native Community, alright? So it is here, “lottie-react-native”, and basically, this Lottie thing here,
it works both for React Native, and for iOS, and we can use it directly on the SDK, both for Android, and also for
web, you can also use Lottie, it is a library that can interpret, read this JSON, and show the animation on the screen for us,
simple as that, and we can use any kind of animation. “Diego, can you give me an example
of which animations I can use?” Take a look here. There’s a
website named “Lottie library” And here, there are many animations ready
for use, that you can use totally for free, alright? Of course you can create your own animations on After Effects and but there are many awesome animations. For example, let’s suppose we
wanted to look for an animation of “Like”, like the Instagram’s
like, that makes that little heart… “jump” let’s say it like that. I’ll search for “like”, and here it will show many options, we wait a little bit, look, there’s one
here that is really cool, there’s this one, there’s this one, there’s also this one, look, there is one “jumping”, this one here, really nice too, so, now, what animation will I look for? Dude, I want something related to a rocket, related with “rocket” so let’s search for “rocket”, I’ll see which animation I like the most here, and then I’ll download this animation to use it on my
application. You can see that there are a lot here, there are some loading ones, this one I was even
going to use on the Rocketseat Experience’s app, look, there’s this rocket here that is awesome, wow, there’s this bear here, I’ll use this bear, I loved it, so let’s go. I can see here that I can change the speed of the animation in case I want
to, for example, I want it to be faster. 1.5x speed, I can change the background color, which is white here, right? I can change anything I want here, uhm… I can change the colors too, when
I go to “Edit Layer Colors”, here, it opens an editor, and here for example, look, I… I select the layers, look, there’s the layer “dust” “dust”, which are the dust
layers that come through, there’s this “cody riding”, uhm… let’s see if I can change the color
of the rocket… I guess that’s not possible. Teah, here I can’t edit the rocket. But there are many animations that I
can edit everything. But alright, let’s go. I’ll download this animation now, and here we press “Download JSON”,
it has other formats too, in case we want to use a GIF for example, Let’s go. I downloaded the JSON, it is here, nice, now I’ll create a React Native project, let me close all my VSCode’s here… I had already created a little project
to test this tool, and I’ll create here a… “rnlottie”, I had already
created a “lottiern” before, to test, I’ll leave it creating the project here, and now we’ll see kinda how
this lib works, how we install it, and much more. So now that I already downloaded
my application, I can close this right here, I can go back here to my library, and now, basically, “Lottie component for
React Native” Works both for iOS and Android just as fine, uhm… here it says “Lottie is a mobile library for Android and iOS that parses the After Effects animations exported in JSON format, using bodymobin, alright? and it renders natively inside the application, this is really cool, it renders totally natively, so React Native can create the native interface, this here is really performatic, alright? Here are all the installation steps, uhm… it ended up giving some bugs on the installation for me, specially because the version, because I was
installing on iOS, on Android it works just fine, on iOS it bugged a little bit because I was using a really old version of CocoaPods, right? Which
is the package manager of React Native, and then it was bugging, but I just had to reinstall
CocoaPods on the most recent version, and then everything worked just fine, so that
is something to keep in mind when using, uhm… React Native, try to always ~cough~ sorry, keep everything updated. So now
that I already created it here, I guess I called it rnlottie, Alright? Now I’ll install this library. I’ll start by
giving a “yarn add” on “lottie-react-native”, alright? And I have to also give
a “yarn add” on “lottie-ios” too in this specific version that it is saying here. So, let’s go, I’ll do a “yarn add”, maybe when you are watching this video, the
version will already be different from this one, so always check the documentation,
never go for the versions that I’m installing on the video, alright? And now for the iOS it says
that I have to go to the iOS folder, and run a “pod install”. Alright? The only thing that I needed to do as well is adding, here in the profile, on… when I was testing this library, this little flag here, “!use_frameworks”, simple as that, so it can match, uhm… the dependencies in a… nicer way here. So that was something
I saw on the documentation, that you need to use when we did the the… update of this library. Now I run the “pod install”, here in the ios folder, uhm… [Reading] “Invalid podfile”, uhm… uhm… okay. Wait. It’s not
!use_frameworks exactly like that, let me see how I… how I was supposed to type this, so “vin www/tmp/” uhm… “lottiern/ios/podfile”, uhm… “use_frameworks!”. Oh okay. The
exclamation point comes at the end. Alright, now I’ll run a “pod install”, we wait a little bit, it will do the native installation of the… the dependencies, It’s done, all ready, now I just have to run my
project on the emulator. So I’ll open the emulator here on the side, I can run
“react-native run-ios” direclty, if you’re using Android you just
have to open the Android emulator, run “react-native run-android”
and it will run the emulator. I’ll wait for it to finish this execution of the application inside the emulator, And then I’ll be right back to show you how we are going to put the animation we downloaded here inside our… our emulator. the only thing I’ll do is already
take the animation download, that I got here, “Cody riding a rocket”, I’ll access here the tmp folder, “rnlottie”, and I’ll put it on the root, and I’ll call it rocket.json, alright? Uhm… Let’s see, I’ll already open this project
here on VSCode just to save some time, alright? Let’s go. Let me access here, “www/tmp/rnlottie”, I open it inside my VSCode, I’ll show
it working both on Android and on iOS, don’t worry, here, now, on my App.js I’ll delete
everything that comes by default, using the Rocketseat snipped here I’ll create a… a functional component, it is… it is running the emulator, so it is really slow here, in this first process, here is my snippet, I’ll import my animation here, so I’ll simply “import” uhm… I’ll call it “rocket from” and
here I pass our JSON, “./rocket.json” which is in the same folder, and I’ll also import the Lottie inside “react-native-lottie”, alright? If I’m not wrong, that’s the name of the package,
no, it’s “lottie-react-native”. Alright. This being done, now, here in our view, I’ll just switch it to “SafeAreaView” so it won’t… be behind the status bar, in this SafeAreaView here, I’ll simply put a “flex: 1”, so it can occupy the whole screen, and here I’ll put our “Lottie”, alright? and then Lottie receives a property called “source”, which is what is the co– the… the animation itself, it’s like it is an image component of React Native, alright? Here I can also pass an “autoPlay”, so that once the animation is shown on the screen,
it will start playing, otherwise you can pass a “ref” here, right? And set a… reference from React and play this, right, run the animation in a manual way, and I’ll also add a loop, so it will stay uhm… in loop, right, once the animation ends,
it starts again, that will look very cool. Uhm… and here now I can pass a style too, defining a few sizes for this animation,
so here I can control many things. Uhm… let me see what were
the Styles I added last time, when I was testing, so it will look really cool here, alright, in this SafeAreaView here, I’ll make
all the content be aligned to the center, so I’ll add both a “justifyContent: center”
and an “alignItems: center”, and here inside our application, I won’t–
there’s no need to add that much styling, the only thing I’ll add to it is a “resizeMode”, that just like an image component on React Native defines how this animation will resize, based on the container that’s around it, so I’ll select here “contain”, so it… so the size of the animation will
be contained around the container, so if the container has a width of 400, and a height of 400, the animation
will always be inside it. if you switch this to cover, what
is it going to do, maybe it will cut a part of the animation to make it cover the entire container,
so we always have to be careful with these things here. And here on the style I don’t need to add many things, I can just pass a property named “autoSize”, this autoSize here, it will resize the animation automatically, let’s say it like that, based on their proportions, that are informed here in our JSON, of our animation, so take a look,
this is our JSON, that we imported, of animations, here are all the steps that this animation needs to go through, inside our
application, this here is really nice because it is crazy, but everything here is
exported by After Effects automatically. So I’ll save this right now, let’s see
if our simulator is already running, ohh, I was already running another React
Native project, so let me stop running it, Here, it already did the installation, let me just run “react-native start” or “yarn start”, it will work just as fine, let’s wait a little bit for it to start the Metro Bundler, oh, just reminding that Lottie, one
thing that I forgot to talk about, it is there by default on Expo, so if you’ll use Expo to develop your project… in React Native, Lottie is already integrated there, automatically, so here inside the API Reference you search for “Lottie”, it is already here, it is already installed on
Expo, you only have to install this lib here, and you can use it the same
way I’m using in this video, so, I’m only showing it here through the React Native CLI, because at least it shows the
step-by-step, on Expo is way more simple. I’ll reload it now, and it will start loading our Bundle, this shouldn’t take long, uhm… it gave an error here, let me see… probably it’s something about the cache… uhm… [Reading] “could not find libraries component, button”, let me run a “react-native start –reset-cache”, so it will reset the cache from
Metro Bundler, probably it has… some cache from the application I was running before, nice, there was an error here, basically some yarn installation failure, but I only
had to delete the node.modules folder, run yarn again, I ran “react-native start”,
and it is already running, and there it is, my bear, surfing on the
middle of the screen, with the animation totally natively, this here is really cool and now I’ll run the same project on Android, the animation has to work the
same way, without me needing to do any kind of change to the code. So, what I am going to do now, I’ll open
my Android emulator here, so let’s go. I’m opening the RN here, it will already be running the animation that I was
running on the other project, to test this lib, let me close this here, and now I’ll run the project on
Android, let’s go. “react-native” oh, it is running the emulator here, let me
open a new tab on VSCode to do this here. Let’s go. “react-native run-android”, and now it will run this code
inside my Android emulator, and everything has to work exactly
the same. Let’s wait a little bit, nice, now it is already starting our application, now let’s just wait for Metro Bundler here to finish processing our Bundle,
to show it on the project, but I hope that everything will go fine, and… we’ll have our native animation running via After Effects inside the iOS and Android application the same way, without needing
to change any kind of code, thanks to Lottie. Alright? Let’s wait here, it is already in 30%, nice, now here it is, our animation
running both on Android and on iOS totally natively, and it is really performatic, you can
see that the animation is really smooth, this here is looking awesome. And basically, this has no boundaries, we can use this After Effects
animation thing for a lot of stuff. One thing that I think is really nice,
and I see many applications doing this, is when you have a form, and then a submit
button, a confirmation button for example, when you click “confirm”, you can join the animation APIs from
Re– the animation API from React Native with for example an animation made by After Effects to do this, there is the big button there, ‘this big’, you make the button smaller, to make it kinda in a size… squared size, right, and you convert it into a circle, it gives that little check,
and explodes, many people do that, right, like… you click on the button, it shrinks,
checks and then “explodes”, just to… tell you that everything went fine. So this for sure is a combination of
the React Native API, that you use to shrink the size of the button,
make it have a round border, and the– Lottie for example, an
After Effects animation to make this explosion effect, of the
button getting bigger and more, that ends up looking really nice, so we
can use these APIs together, alright? Maybe if you want, if you want me to make a video here explaining
the animation API from React Native, how we use it, which packages I’m
using to make the animations, to deal with gestures, users and much more, leave a comment down there, if you enjoyed this video, uhm… also leave a comment down
below, I’d really like to see you guys doing this example and putting
it down the comments a link to a picture, uhm… showing the animation you created using Lottie. Take a look at that Lottie library, or if you know
how to use After Effects, create an animation, send it to us, who knows, even making an animation with Rocketseat’s logo, something like that, it would be really nice to see it. I’ll be staying around here, if you enjoyed this video,
don’t forget to leave a comment down below, also leave a Like, and see you next time!

100 Comments

  1. Fala Diego, obrigado pelo vídeo, explicação sensacional, gostaria de ver mais vídeos explicando sobre a API react-native-gesture-handler, estou trabalhando em um projeto de TCC e consumindo bastante do seu conteúdo como referência, obrigado

  2. Sem dúvidas, algo que traz valor para um aplicativo é animações e por isso acho que seria muito top mais conteúdos sobre Animated API

  3. Massa demais! Seria muito legal se tu fizesse um vídeo explicando de forma detalhada como funciona as animaçòes no RN e a integração delas com a biblioteca de gestos.

  4. Cara sensacional. Mas eu tô apanhando muito na utilização do animate do react native. Então manda bala nesse video de animação do react!!! <3

  5. Show de bola!!. Muito top!!. E o melhor dos seus vídeos é que não preciso ficar aumentando a velocidade deles você é bem rápido, prático e direto!! 💻👏👏

  6. MEU DEUS, COMO ASSIM? Comecei estudar alguns cursos de After Effects (tô amando), logo agora o Diego posta um vídeo da integração com o RN, mano??? Ele lê minha certeza kkkkkkk

  7. não entendi como fez os emuladores de android e IOS mas ficou show — tem como fazer animação e colocar na galeria pra todos?

  8. Fala Diegão!
    Animações criadas com sucesso aqui!!!
    Parabéns conteúdo top!!!
    https://github.com/AlissonMacedo/animation-lottiefiles-RN

  9. Muito top e muito fácil,so me apaixonado mais por react-native 😍, e sim quero um vídeo sobre a animação do react

  10. muito foda, o engraçado que um ontem dia 24 eu estava comentando na minha empresa com um editor de pos produção, o quão foda seria se tivesse como usar animações do AE em programação, ai vem vc e taca isso na minha cara HHAAHAHAH
    massa diego, sou fominha do seus videos

  11. Seria mto massa e mto útil um vídeo com exemplos de feedbacks animados (Sucesso, Erro, Atenção, entre outros) utilizando animações do React Native e o Lottie

  12. Com certeza eu vou fazer, pode trazer o vídeo sobre animação que eu vou acompanhar todos, esse final de semana com certeza vou codar algo com essa lib, simplesmente incrível!

  13. Alguém já passou por problema no componente Image? No Ios (só no device fisico em versao release) imagens de URL não carregam na primeira tela (logo após abrir o app) de vez em quando. Não sei se pode ter algo a ver com o react navigation

  14. Legal, muito show a dica… ja que mencionou o botão usando a api do React e essa poderia fazer um vídeo do botão que explode kkk.

  15. Já está pronto o vídeo de integração da animação do RN com lottie? E agora? Não? E agora? 😀 Já que você deu ideia, podia fazer esse video do submit do formulário com a da confirmação! Agora já está pronto? 😀

  16. Video muito fera, gostaria muito de ter tipo um mini curso onde fosse focado apenas em animações e essa de fazer o botão virar um check e explodir seria demais.

  17. Show! Eu fiz uma animação no after para splash screen com a igrejinha da Pampulha, ponto turístico de Belo Horizonte.

    https://drive.google.com/file/d/19bVmNpow9DmlZcwsxV0I7cyi0aGJukzQ/view?usp=drivesdk

    Agora seria top se você fizer outros vídeos mostrando interação com botões, animações de loading com redux/axios/apisauce

  18. Fala Diego muito bom o vídeo parabéns, sou fã do seu trabalho, você poderia fazer um vídeo usando a câmera do smartphone no React Native, procurei já bastante mas não consegui, valeu ✌🏼

  19. Por favor cara, faz um vídeo de vc fazendo um programa utilizando o Expo. Estou com dificuldades em como criar uma calculadora kkk n sei como pegar os dados e depois fazer os cálculos pf ajuda nois akí. É um TCC PFPFPFPFPFPFPFPF

  20. Show! Muito bom o conteúdo. Seria legal demais se você fizesse um vídeo mostrando como posso fazer isso na splash screen :3

  21. Show de bola, se vocês estiverem precisando de uma animação que não está disponível, me contatem que eu posso fazer. Tmj

  22. Show de bola. Pensei em criar uma Splash Screen com animação. A questão é que eu preciso criar o desenho da animação. Tem algum sistema ou site que possa me ajudar nisso?

  23. Séria muito interessante uma série de videos voltada a criação de animações para aplicações React-Native.

  24. Animação em lottie para substituir o Loading padrão do React Native: https://gusflopes-dev-assets.s3.amazonaws.com/gostack-challenge06.gif
    Github: https://github.com/gusflopes/rn-starter

  25. Se ele tivesse mais calma pra explicar as coisas ficaria mais fácil entender o que ele pensa kkk mais toma o like só pq entende mt mesmo kkk

  26. Atenção pessoal, verifiquem a versão do vosso projeto antes de instalarem o Lottie, eu fiz a instalação dele na versão 0.60.0 e a versão do meu projeto é 0.57.7 isso matou todo projeto, a sorte é que fiz um backup antes.

  27. Fala Diego, estou cansado de React, React hooks, React Redux, React Native. Tem como começar um curso de peixe de grande como: Angular 8, .net CORE 3.0 e Flutter?

  28. Importei minha animação pro RN mas notei que o glow e motion blur que usei não saíram conforme está no AE 🙁 Esses efeitos não são suportados na exportação do JSON?

  29. #Rocketseat Podia mostrar um exemplo de uma aplicação conectando via Bluetooth (BLE), e mandando alguns caracteres.
    Se fosse com um arduino (esp32) seria melhor ainda

  30. Com certeza! Será de extrema ajuda mais vídeos de animações em react! Falta conteúdos de qualidade sobre o assunto! Abraço!

  31. Parabéns, você está levando o RN para outro nível.
    Sugestão, ter um docker com tudo que você precisa e com as versões que você usou nesse seu vídeo

  32. E o Flare da 2dimensions também é interessante, dá para fazer umas animações mais complexas, e ainda aceitam input

  33. Ei cara antes que eu me esqueça…..Eu não entendi nada…..Acho que vc faz muita propaganda desses reacFodastico reacCu reactWalthafockyou parece que vc está me pedindo para desistir de programação. Vou ficar só na minha mesmo vou voltar para linguagem C mesmo só pra conectar alguma coisa. Deve ser mais fácil.

  34. Interessante que o Diego comete pequenos erros e os corrige em tempo real, isso nos ensina a como lidar com erros. Como acha-los e resolve-los.

  35. olá tudo bem, fiz igual a você só que pelo expo e está me dando erro na linha que tem esse context <SafeAreaView style={{ flex = 1, justifyContent: 'center', alignItems: 'center'}}> você pode me ajudar, estou começando a programar agora. não tenho muito reuso para achar a solução. valeu

  36. Eu adoro seus videos massssss se colocar eu e vc pra conversar o guines book vem correndo pra contar o numero de palavras por minutos que conseguimos falar juntos kkk ta doido

Leave a Reply

Your email address will not be published. Required fields are marked *