In real life, objects usually follow non-linear movements. A ball for example Won’t fall at the same speed from the very first second to the last, It will change over time. To mimic real and natural animations in React Native, You need to learn about how they can be configured to get this organic feeling. In today’s episode of How To Animated, Let’s learn animation types. As we’ve seen in the previous episode, Animated.timing updates an animated value over time. There is obviously more to this since you can configure animations for different use cases. For example, You can decide to delay an animation so that it starts two seconds later. You can also set the animation duration, which is quite common, to a given time. Both delay and duration are in milliseconds So remember that one second is a thousand milliseconds, Two seconds is two thousands etc. By default, You might have noticed that timed animations accelerate in the beginning And slow down before it ends. That is because they follow what we call an easing function. As it was put out on the internet, “Easing functions specify the rate of change of a parameter over time” This means that given a timeframe You can know how fast or slow a value will change at every single moment. For example, the default easing function with timed animations Is the well-know ease-in-out Which slows down the value growth when it starts and also when it ends. You can compare this to fade-in and fade-out effects in a video, When it slowly uncovers an image, To then slowly fade out to black. With an ease-in-out type of easing, Your animation value will slowly increase, Then steadily go towards the target value, To then reach its final value. Of course, The point of easing functions is that You might want your value to grow differently over time. React Native comes with a pack of predefined functions Which you can import from Easing. Since the default easing is already an ease-in-out, Let’s give our animated object a “drop effect”, Using Easing bounce for example. If you’re curious, You should experiment with the different examples and easing types in the documentation. What matters is that you understand How an animation feeling is correlated to how it moves over time. Pick the right function to bring the right feeling to someone. Besides timed animations, You can also find spring ones. Without getting into details too much, A spring animation can be seen as this little cart moving between two springs. You can tell it isn’t linear at all And have a real organic feeling to it. Just like timed animations, You can play with different parameters such as the friction, Speed or even bounciness of the movement. Code-wise, It follows the same API as Animated.timing, This time using Animated.spring. It’s important to note that the animation isn’t timed So you have to change the parameters to either slow the animation or make it faster. Using Animated.timing and .spring, You are now able to pretty much reproduce any animation you see in your every-day applications. Now that you know how to create animated values, How to configure them, You might want to create bigger animations such as a series of them, Or two animations rolling together. So let’s see how you can compose animations together. At some point, You will probably need to run one animation after another Or together at the same time. To do so, You can use Animated.sequence and .parallel Which both do exactly what they say! To animate in sequence, All you need is to pass a list of animations objects to Animated.sequence. Instead of calling start() on the animations we had so far, Just keep the whole part before since it represents an animation. Create a couple and pass them to Animated.sequence, Which will run each one in a sequence. Then you still need to call start(), But this time on the sequence you have just created. Animated.parallel works just the same to run multiple animations all at once. You can actually combine sequenced and parallel animations together. One last interesting way of composing animations is by staggering them. Basically, the idea is to run one animation after the other While pausing X milliseconds between each. If you have a series of blocks that you want to nicely fade-in from top to bottom, You could use Animated.stagger which we’ll try right now. I will just create a few blocks, And each one will have its own animated value To change their opacity one by one. We’ll start at zero since we want to hide them first, And then update them to one so they show up one after the other. At this point, I will start with a one-second staggering effect, Which will run each animation after one second. If I lower that one second from 1000 to 125 milliseconds, The animation will be much smoother. Pretty simple, isn’t it? Now that you know about different types of animations and how to compose them, Let’s wrap this up. If there are three things to remember today, Here they are. First, there are different types of animations with Animated Timed and spring being the ones you will need for most use cases. They both can be delayed using the delay property, And timed animations can follow a fixed duration if given. These same timed animations, Use easing functions to know how to animate a value over time. There is a long list of easing functions you can choose from, Each one bringing a different touch. Pick one according to how you want someone to feel when using your app. Finally, Animations can be easily composed, using Animated.sequence, .parallel and .stagger. All of them can be combined so you can create very complex animations. In the previous episode, I announced that we would also learn about interpolation today But I found it important to focus on one major part at the time. This means that in the next episode, We will indeed be talking about interpolation. Remember to subscribe if you don’t want to miss it. Thanks for watching, And see you next time :)
