There are tutorials which describe the animated API . So , I am not going talk about that. I will only talk about how i made my own animation using the animated API .
First, there are four components you can animate using the Animated API.
In my case, I wanted to animate a View, a Image inside another View.
To animate something, you need to do the following,
Import Animated from react native. Then, Create a new Animated Value Object. Assign the value to a this Object property in constructor. Which you will given as the first parameter of animated methods.
Let’s Move to main Topic, I wanted to animate these two animated component.
If you don’t understand it, don’t worry . I will give the full code example.
Now its time to define these styles. I used transform style for my cases and scaled it according to the animated value.
There are various methods that ships with the animated API.
They take two parameters. first: an Animated value , second: a configuration Objects
The most used are:
These two are kind independent. They are used with other animation methods like :
I only used the upper two in my cases. But you can combine them with the later two to create more dynamic beautiful animation.
I wanted to start the animated on screen render . so, in ComponentDidMount , I called them with the parameters . The configuration object must have toValue property. the other values are optional ….
At last , I have started the animation with start() method.
The, End Game, is like the video below. ( yes ! i am a Marvel fan too )
Thanks for reading …. the full code is below ….
For Details , check out the doc …
Create your free account to unlock your custom reading experience.