Again to quickly review the Animated API, in the Animated API we declare values
and the values can be either created as an animated value which is single value.
Or you can say Animated.ValueXY which creates a vector of values and
then you can use interpolate to change one value, and
then map it an output range, as I briefly illustrated,
and then make use of that to control various aspect of the views.
So the animation types that can be use in your application include animation decay
which does the first start of the animation and then slowly slows down.
You can use an animated spring to implement the spring like animation
in your application.
So for example you can have a view bounce around and then settle down, and so on.
And similarly, you can use Animated.timing to get exact control
over the timing over which this animation is performed.
And in the exercise, I will Illustrate the use of Animated.timing.
Furthermore, the animated API can be applied to, as I said,
the image, the ScrollView, the text, and the view.
So you can transform properties of any of these by using that Animated API.
So for example, you can control the position of a view,
you can control the size of a view.
And then for example, you can zoom a view onto the screen by changing the scale
of the view as a function of time, you can animate a text, for example.
You can have a text marquee that scrolls the text across the screen and so on.
So a lot of functionality can be generated using the Animated API.
You can also compose a group of animations together using a delay which
allows you to delay the animation for a period of time.
You can do parallel animations simultaneously,
you can sequence the animations to happen one after another.
If that is something suitable for your user experience, you can stagger
the emissions to happen one after the other in a particular order, and so on.
So all this is supported with the Animated API.
So as you can see, the Animated API is a very powerful mechanism that supports
various kinds of animations and
gives you full control over how to design your animations.
Now you can easily go crazy using all the Animated API functionality,
and come up with complex animations within your application.
But again, make sure that you keep animations within
a reasonable boundary so that your user is not ending up getting
up confused with all the oozy bang that you do on the screen.
While the Animated API is very powerful,
it requires a certain amount of effort to get it to work.
Now there is another package called react-native-animatable which
takes the Animated API and packages it into a set of standard,
easy to use animations that you can apply to various views and images and so on.
The standard set of animations can be done using declarative transitions,
as we will see, in the example.
Now, in addition, the declarative API which supports precomposed animations
can be applied to a text, a view or an image within your application.
I'll illustrate some examples to you in a short while, and
then show you how it is actually done, and we'll do that in the exercise.
Now, several properties of animation, the duration, the delay, direction, easing,
iterationCount, and transition, all these can be controlled in the declarative API.