React Native EU 2021: Alexander Kuttig - Animate everything - How to use Animations with 60 fps

this conference is brought to you by codestack react and react native development experts hi welcome or servos as we say in bavaria here at react native eu 20 to virtual conference thanks for having me again my name is alexander and i'm talking about animations today and how to use animations in react native that they look beautiful that they run smooth at 60 frames per second even on low end devices so when we are talking about animations in react native we have to keep in mind that the general architecture of react native can be quite challenging for running smooth animations there are pretty good solutions out there i want to talk about three of them today and uh yeah basically it's the three solutions we use regularly in our company when we are working with react native applications and i will give a short overview of all these three solutions and i hope every one of you can take something out of this talk so let's start right away when we are talking about animations um the first question we have to answer is why are we using animations well first of all they make our apps look nice but that's not the main reason at least it shouldn't be an animation should always serve any purpose so at least they should increase the user experience so for example we could use an animation to give an advanced feedback for a touch interaction of the user so when the user for example presses a button which he has to press for at least three seconds to trigger any action we could for example fill any bar that the user sees okay i have to press press press press and now the action is triggered so this is an example um which for for what i mean when i say any animation should serve any purpose um another thing is um progress and loading indication so it's always good to give the user anything he can look at while he's waiting for the content so progress and loading indication is a good example for an animation or where animations should be used also a lot of apps do use scroll animations at the moment especially in the header area so when we scroll larger header is scrolled out of sight and a smaller header occurs and last but not least animations are a great tool to grab and direct the user's attention to any part of the screen so when something moves on the screen the user looks at it so animations are great for grabbing the user's attention so basically you could say animations are an important part of any high quality app and since we all want to write high quality apps in react native we should have a look how to make great animations and to understand how to make great animations we have to understate understand the the challenge with animations in react native first so what's the problem with animation in react native i think the part in the middle of the screen is something you all know it's the general architecture of react native so we have this js thread where we execute our written js code and then we have the native thread which render which does all the rendering and gets the user interaction and these threads communicate via this thing called the bridge and this is this architecture is fine um but it can become quite a problem when dealing with animations because when you look at the example on the left hand side this is basically an example like i described before we have image as a header and when we scroll we slightly move the image and the title out of the scroll view and a small header occurs which stays at top of the image and when we over scroll the image gets scaled it's just normal behavior in an application or in a mobile app so a lot of app do this so it's basically a pretty simple animation and what's the problem with the simple animation when you look on the right hand side here is described what happens under the hood when we work with the general react native architecture we get the on scroll event and the value of the scroll view um every 60 milliseconds at least if we don't throttle it and we shouldn't do so because then the animation would look quite laggy and every 16 milliseconds we send the scroll view over the bridge um calculate the new values for our animated components send these animated values or this these values back to the native thread where the native thread renders the the view so this can become quite a problem because not every um animation is that simple so there could be some some more calculation involved and when we have a lot of calculation on the js thread um in the worst case our jf thread becomes blocked due to all this calculation and this would mean on the one hand we are not able to have to directly handle any more user input and on the other hand it would possibly delay our animation and we would drop some frames which then would make the animation look very messy and not that smooth so there are some solutions to this general problem and as i said i will show three of them today but before we dive into the solutions let me just introduce myself very briefly my name is alexander kotik i founded my own software company here in munich in 2012. i work with react native since 2016. i also made some small contributions on community projects like asunc storage by the way um it was a great experience um the guys there were very helpful so um if you never contributed to open source i can definitely recommend it um so just give it a try even if it's just a very small contribution and it could help us all so yeah back to me i'm also aws solution architect professional because i needed some knowledge for writing the backends for my app and aws is a great solution for death for that and i'm also trying to write from time to time on my medium blog so if you'd like to you can you can follow me there i'm working at my my own company it's called horizon iphone we are based in munich and we are 32 people at the moment and we focus on react and react native development and we build cloud-based backends for our react and react native applications we are working with aws google cloud and azure so we're working with all three big cloud providers yeah it's very very good to work with the cloud providers for back ends for our apps because it makes it very easy back to the topic when working with animations at least when we work with animations in our company for us there are three ways to deal with animations first one is the internal react native animated api which does a good job for for simple animations um and we like to to work with it a lot second one is the great lottie framework um there is uh uh there are sdks for native integration but also rig native lottie sdk so um you can it's very simple to use and i like it a lot so if you have never heard of it um you will be really surprised how easy it is to integrate animations um smooth animations running at 60 f fps in react native and third of all it's the awesome reanimated framework which recently was released in a second version um i love to work with it if you have never worked with it you should definitely have a look at it i think i read in a blog post lately it's the gold standard of animation and i couldn't agree more it's really awesome but let's start with the internal animated api we see a very simple example but it's good to explain how it works i've taken this from the from the official react native documentation and as i say it's very easy so um we have this view which is declarated as animated view this basically means um that we can use animated values by in the styles of the view so as you can see here we have a general style and then we have this additional style which gives opacity value and this opacity value is one animated value it's called fade nm um it's just a variable which we define um we can name it like we want and yeah we give this value to the opacity and then um to complete what you see on the left side we have these two buttons um it's the fade in and the fade out button which calls the fade in in the fade out function and this is how the declarations look like so we have this fade anim variable which basically we work with functional components here so we store it as a reference and basically it's an animated value um which got gets initialized with a zero and then we have to fade in and fade out function which uses the animated dot timing to change this animated value so we give the animated dot timing the fade and animated value and say okay please take this value and change it to 1 over the duration of 5 seconds and what animated timing does is it calculates how the value should be in any frame in this five seconds and then it renders the value or it it passes the value for every frame to native so basically it's the same for a fade out function um except that we change the value to zero and the duration is only three seconds so the fade out is faster than the fade in um yeah it's it's a very basic example but uh i think it shows clearly how uh it's how animation works and how is it it is like to work with animated values because basically all animation works with this animated values so let's come back to our scroll example from the beginning basically it's the same concept we have this scrolling value here and this scrolling value is changed but it's not changed via animated timing function but it's changed due to the animated event function where which we use to kind of couple this scrolling value to the on scroll event to the native on scroll event of the scroll view so what we are doing is we look at the native event and which we get on scroll and then we extract this y value and couple it to the scrolling animated value what you can see here in the top is basically the image and the view which is the small header which occurs and basically you can see here the opacity um it takes an interpolat interpolated small header opacity variable and we'll have a look at this later and here we transform the image right so we translate it um with an interpolated translate value and we also have an interpolated scale value where we scale the x and y dimensions of the image so where does these values come from basically it's simple interpolation we have the scrolling value which is our animated value like in the example before but now since we don't only want to use the scrolling value directly because um it goes from zero to infinity and we don't want to want to change any opacity to infinity we do a simple interpolation and this interpolate function works very well because we just say okay take the scrolling value and we define an input range and we define an output range for this input range so basically um when working with this interpolated small header opacity or calculating this interpolated small header opacity we say okay from 0 to 200 please do nothing um stay at zero and then when changing from 200 200 to 220 and please change from zero to one and what this interpolation does is it calculates the values um for yeah the different scroll positions and passes this to native same for scale and translate so when we come back here um you can see this use native driver true and this really is a very very important thing because what this use native driver does is it says please take all these logic and pass it down to native in one call so when we are working with use native driver we change the behavior of the animation from the one we've seen at the beginning to this one we create the animation rules in our js thread we we then send this animation rules um to native and the native thread then knows the animation rules and all calculation and all rendering is done on the native thread so we don't have this round trip every time on every frame or on every scroll um event we are processing our animation completely into native and this is really awesome because um then we never block our js thread we can respond to user interaction we can use our js thread as we like um and yeah that's why you definitely should use um use native driver when working with the animated api well here we have a little more advanced example this is taken from an awesome youtube tutorial from catalin miron i think he spoke here two years ago and as you can see basically it's also a flat a scroll view or a flat list in this example and basically it works the same right um we have this animated event where we um have the the scroll value um in this case is it's the x value because it's a horizontal scroll view we also use the native driver and what's the difference to the example before is that we have the interpolation not on one time in general but we have the interpolation in every item so for every item we have an animated view which has is its own interpolated value and it's very cool because it shows that um this this um use native driver can create very performant um very performant animations um even if we have a lot of interpolation in play and that's only uh the the the lower part of the screen here right there is some more code um for the the image in the background and the changing of the images in the background but um just have a look um i've put the expo snack of catalin miron here um also he has a lot more youtube videos on his channel where he talks about using animation with the animated api so would definitely recommend it if you'd like to see some more complex examples please have a look at this youtube channel so summary for animated um basically my tips are use use native driver i would recommend not to use animated api without using use native driver basically it's just interpolating animated values it works great with scroll view and flat list because then it's easy just to to couple the scroll value to some animated value and then interpolate it and it's best for simple and easy animations so um now we're coming straight to the limitations because complex animations can become quite confusing they can become a lot of code and you are able to kind of combine animations um you can run animations in parallel you can run animations one after another and so on but they become quite complex and quite confusing very fast so we in our company use the animated api for simple use cases and in applications where we only have these simple use cases another thing which you have to keep in mind that use native driver is limited to non-layout properties and this is a very very large limitation so things like transform and opacity will work but all flexbox and position properties will not so you can not just say okay please change the height with uh with an animated value while using native driver so this won't work so after the internal react native animated solution want to show you a framework which i really like um and which is the basis of this animation you see on the right and this framework is called lottie so when you look at the animation on the right side um this animation would be quite a lot of code when we would have to script it with animated or even reanimated so all the these lines which um occur one after another um it would be a lot of work so that's where lottie is the ideal library for basically when you look at all these animations or what they have in common is that they aren't that easy to script but with lottie the code for them basically is all the same it looks like this you have a lot of view and you have a json file which is the resource for your animation and this really is cool when you have the json files i will show you now later um where these json files come from but basically it's that easy right this is the code for all three of the applications um just with different json files we have a container which we center our animation in then we have the lottie view and we say we say to the lottie view please or to play and then it just works one thing which is which makes lottie a lot cooler is that we do have programmatic control over the animation which is defined in the json file so basically as you can see here um we are we again have a scroll view where we couple the y value of the unscroll event to our scrolling animated value which is defined here and then we have an interpolated progress which we couple which we um which we interpolate the scrolling to and we just say okay please um for minus one thousand to zero go from one to zero and from zero to one thousand go from zero to one basically what we are doing is um we use this interpolated progress to say the lotti view it should play on a scroll so when we scroll fast the animation will play fast and when we scroll slow the animation will scroll slow and as you again see we are using native driver here so all this takes place in the native or ui thread and we don't block our js thread when you look at the animation here on the left side you can see it does do nothing when it stays where it is and when we use the scroll view it starts animating and this is really cool because we can have very complex animations in this json files and we can control when it should play where the progress should be um how fast it should play and so on so we have a lot of control over the animation and where does these animation jsons come from well basically they are after effects animation files so adobe after effects is a program which is used to create animations for videos and for other things and then there is something called the body movement plugin which creates these json files out of the after effects animations and this is really cool because when we come to the summary there is quite a large market um for these lottie files so there is this lotifies.com website and it has a lot of animations free animations paid animations and you can find animators there which create um custom and cool animations in simply no time for your project and you as a developer don't have to script your animations in your code you can just work with them with a professional animator who creates the animation and then you can use this animation via the lottie react native plugin um i put a link in here and you have at least some control over the animation programmatically and we use it for avatar animation we use it for animations which have a lot of components and we use it for animation where we don't have to have to be able to change all of the animation in our code because that's one of the limitation we don't have full control via code right um we can say okay please play please play from from frame 60 to frame 120 but we can't say okay this part of the animation is too too um too large please make it smaller um that's that has to be done in after effects so one of the limitation is you have no full control via code the other limitation would be you need to create the animation files um either by hiring a designer or animator or do it yourself with after effects after this short introduction to lottie um i want to talk about the awesome reanimated 2 framework it's the third framework we use when we are working with animations and i think it's the most complete of all so to understand what happens with reanimated 2 i took some code from the documentation of the software mention page it's basically the idea behind reanimated basically is kind of the same like use native driver but it's a lot more complete so what they did while creating react native animation they introduced something called worklets and worklets basically are parts of code which don't run on the js thread but it runs on the ui thread it runs directly on the ui thread so basically you can simply simply put the worklet string in your function and then when you work with react and native reanimated um the reanimated barbell plugin sees okay this is code which should be executed on the ui thread and the barbell plugin transforms the code that is executed on the ui thread so basically this is what i just said right when we have this this scrollview example from before we have the js thread where we create the animation rules or we create the worklets and then we have the native ui animation thread where we have the worklet context it's as it has its own context on the on the ui thread and basically in this context the calculation of the animation is done but again it's on the ui thread and it gets it gets even better so we don't have to write our own worklets so react native reanimated provides us a lot of custom hooks um which we can use to um yeah to to to have it a lot simpler to work with uh reanimated or with with uh animated values um or with code running on the ui thread so we don't have to to define by ourself what is a worklet and what is not so we can just we can just have a style variable or a style constant um which we say okay use animated style so make it an animated style and then we can yeah it runs on the ui thread another cool thing is that we can have shared values between our js context and our js thread and the the native context or the worklet context i would say so what that means is when we're in the worklet context we can synchronously change these shared values and we are also able from the js context to to asynchronously change these values this is due to the architecture but it's really cool to be able to communicate from the js context or js thread to this native thread and also be able to synchronously change the shared values inside our worklets so let's get this um let's get the pieces together here so again we have the scroll view example and as you can see here we have a scroll value which is defined as use shared value and which is initialized with zero and then we have the on scroll which basically is a function which uses animated scroll handler which is a part with which react native reanimated provides us and again here we look at the on scroll event and we couple the the y scroll value to our scroll value and when we are looking at um now i have have to go back once um another cool thing you can see here is um that we pass this animated scroll value down to our item component so we have a lot of items in this scroll view um you can see it's the the single items here and basically with the scroll value passed down to the item we can work with this shared value in the item and that's basically what we're doing here so this is how the code of the item looks like and you can see here we have a style here and we have a title style here and basically the title style is the style of this text here and the style is the style of the whole container and when we go one slide further here you can see how style and title style are calculated and basically it's look it looks very similar to how the animated api works like we use this use animated style hook and then we return an object which includes a style and basically we're using again simple interpolation here so we are using the animated value which we got passed down to our component and we say okay for this input we're using the index here which we also got passed down to our component for this index to this index or this this this value to this value please change the size the height of from minimal height to maximal height i think it's 200 to 400 pixels here and when you remember what i said about animated was that animated um in a native context was limited um to transforms and opacity and we could not work with things like height well the cool thing on reanimated is here we can so we are able to transform our flexbox values [Music] when we're coming to the title style here it's also a user animated style only thing is that we only change the opacity here so as you can see when we scroll up and down the opacity of the text below the title here changes and so yeah basically it's the same what we did in animated um but in the reanimated syntax so this was a kind of a simple example there are a lot more complex animation possible with reanimated there is this very very cool youtube channel channel of william candylan he is a magician when it comes to reanimated and making animations and on his youtube channel he has a series it's called can it be done in react native where he looks at the best animations from any app and builds them in react native and most of the time he's using reanimated and reanimated too now so the animation you you see on the left side here basically is a swiper where you can change the screen by swiping but it tracks where you swipe and how fast you swipe and things like that and i i included it here just to give you an idea how complex this calculations of such an animation can be and this part i i i pasted here on the slide is just the calculation for the wave animation here so um it's just a part of this liquid swipe um example i pasted the link to the full example here so if you're interested in really cool reanimated stuff please check out the youtube channel check out the github which i pasted here there are a lot of different examples and you get a very good idea how powerful this reanimated tool is so to wrap reanimated up um we in our company use it for complex animations um we use it even we also use it for easy animations when we use it anywhere in our project because we don't like to use animated and reanimated in the same project because it can get quite confusing so when we have a more complex animation and we integrate reanimated into the project um we use it for all animations and my tip definitely is watch the can it be done in react native series on youtube um it's it's awesome limitations of reanimated um well basically there are no real anime real animation real limitations except um that it can take some time if you want to build really complex animations so when we compare it to lottie where you can use after effects to create your animations this can be much faster than to write your animations in code um well the advantage in reanimated is you have full control but ins sometimes it's easier to just um create the animation and after effects and you don't need that much control then lottie is the better framework for me and yeah that's basically what i say at the last point animations have to be implemented by the developer when you have a larger team where you have someone who really has a talent for cool animations and but he's not a developer then lottie is the better framework because he or she can can just build the animation in after effects and then give it handed over to the developer yeah to wrap this up i made the slide with useful links i think i mentioned most of them animated has a very good documentation on the rig native page i really like the youtube channel from of catalin miron the lottie library is available on github or the the lottie react native plugin is available at github um on github and on lotifize.com there are a lot of files and animations for free and there are also page animations so just have a look maybe you can find something cool there reanimated there are very good documentation files on the software mention page they also have some good webinars available there so you should definitely check it out if you haven't done it already and again i can definitely recommend the youtube channel of william um it's it's awesome in the series can it be done in react native it's it's really awesome so i want to close my talk with a little quote um it's basically the same which i said i said at the beginning um use animations way where they improve the user experience of your app never use animations just because you think they are cool so if you're that pumped after this talk now and say i want to you start using animations now and um go to lodifies.com take the best animations please keep in mind don't use animations just because they are cool or if they make your app look great they always should serve a purpose so that's from my side thanks for listening if you have any questions about the talk or any questions about react native stuff in general you can contact me via email or via my linkedin account thanks again for having me and have a nice conference

Channel: Callstack Engineers

Views: 511

Keywords: reactnative, reactjs, javascript, animations, 60fps, softwaredevelopment, frontenddevelopment, coding, conference, reactnativeeu2021

Id: LfCWw0AfCWk

Length: 42min 19sec (2539 seconds)

Published: Tue Nov 30 2021