This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application
Animations
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Multiplatform Mobile App Development with React Native
64 個評分
The Hong Kong University of Science and Technology
64 個評分
課程 3（共 4 門，Specialization Full-Stack Web Development with React）
從本節課中
React Native Alerts, Animations, Gestures, and Persist Redux Store
In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at persisting the redux state, and alerting the users
與講師見面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
Subtle animations added to your application go a long
way in enhancing the user experience.
In this lecture, we will look at how we can add animations to our
React Native application and see how we can improve the user experience.
Again to reiterate the point,
subtle animations add to a better user experience.
Now how do we add animations to a React Native application?
Now the React Native itself supports a powerful API called the Animated API.
Which you can use to build fluid, powerful and
easy to build animations into your React application.
Now it provides a declarative relationship between the inputs and
outputs with configurable ways of transforming them.
Now I'll show you an example in a short while, and then we'll do the last part of
the exercise to understand how we can configure all these things.
Also we can start and stop the animation using a simple start and stop methods,
and we can use timing to control the animations within our application.
Let me show you an example of the use of
the Animated API within our React Native application.
Here, you can see that I have added in animation to the home page.
The cards that are displayed on the home page are now scrolling across the screen.
This is completely done using the Animated API that React Native supports,
and where we use a timing way of controlling the movement of the cards.
Now, we are transforming the pics coordinate for
our card as a function of time to enable this kind
of animation of the cards in the home page.
Let's briefly visit the code to understand how this is done,
and then we'll do the exercise where we will implement this in more detail.
Animation using the Animated API is permitted by importing animated and
easing from React Native.
And then when we need to apply the animation to our views,
then within our application, the animated supports
the animated view and animated image, animated text and so
on, which can then be used to construct the animation.
In constructing the animation, the Animated API supports
the declaration of an animated value in our application and
then we can use the timing methods supported by
the Animated API to change this value as a function of time.
So here, we will be specifying how to change this value as a function of time.
As you can see, the animated value will be changed from a 0 to 8,
over a duration of 8,000 milliseconds, or 8 seconds, and
then it can also specify how this change needs to be effected.
In this case, I am specifying a linear change of the value,
you can even have a rapid change and then slow down,
or a slow start and then rapidly getting to the end point and so on.
And then we can use the start method to start the animation.
And we can also take an animation value, and
then use the interpolate function available from the Animated API,
to take an input range value and then map it to a corresponding output range.
So, a value that changes over a period of time can be then transformed into
another value.
And that other value can be used within your code to
change certain properties of your views or your images, and so on.
So, as you an see in this case, we construct a mapping of
an inputRange to an outputRange here using a variable there.
And then map that into a transform variable that we apply to
an Animated.View and change the x coordinate according to the value.
So in the exercise, you will see more details and I'll explain how exactly this
is done, but that gives you an idea of how the Animated API supports a rich
set of API calls that enable you to perform very powerful animations.
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.
And I will illustrate some examples now on how we can make use of
the Animatable two apply animations to or application.
Going back to application, if you now go to the About Us page,
you can see that in the About Us page, the views slowly fading down from the top.
So that is one animation that is done using the Animatabl,
similarly we can do animations like this in the menu where
the images slowly slide on to the screen as showed here.
And the media go to the details of a particular dish, you can see that the card
slide in from the top and from the bottom onto the screen.
So subtle animations like this can easily be added
using the Animatable with declarative approach.
Now how is something like this implemented?
Let me show you the example for the Dish detail component.
In the code for the Dish detail component, to use the Animatable,
we will import the Animatable from the react-native-animatable package.
And then where you need to apply the animation,
all that you need to do is simply declare the animation like this.
You can see Animatable.View animation="fadeInDown"
duration={2000} delay={1000}.
So you're specifying that the animation should be done over a two second duration
after a one second delay after the component gets mounted out of the streak.
LIke that similarly for the comments also we are using an Animatable view to
surround the cart and you're saying,
animation="fadeInUp" duration = {2000} and delay = {1000}.
That's the simple addition that you need to do to your code,
just to create that animation using react-native-animatable.
No complicated coding required for
implementing such simple declarative animations.
In situations where you want to programmatically control the animation,
then react-native-animatable also supports an imperative way of doing animations.
The animations of themselves exposed as functions that
can be applied to animatable elements.
So you get a reference to an animatable element like a view and
then apply the animations as a function to the view.
You can specify the duration for which you do the animation, and
at the end of the animation, what should be done.
Now, the animation functions themselves return a promise and
in the promise, when the promise is resolved or rejected,
then you can handle what to do after that.
So, that'll also allow you to see sequence animation if you search this to.
So, this is one easy way of adding animations to our application.
Let me show you an example of an imperative animation done using
the react-native-animatable.
Going back to our application, in the Dish Details page,
as you can see here, when I do a left-to-right gesture,
you're seeing the rubber band-like animation on the card.
So the card shrinks and expands like this, and these kind of animations can easily
be added using an imperative approach for adding animations to our application.
To implement imperative animations to our application,
we would take an Animatiable.View like this, and
then get a reference to the Animatiable.View as shown here.
Again this will be illustrated in an exercise that follows later, and
then the reference itself will enable us to get a reference to the view.
And then once you get a reference to the view within your code,
you can easily perform animation like this by saying, this.view.rubberBand,
and then you specify the duration for which you need to do.
And as I mentioned, this function returns a promise, and the promise when it
resolves, we can handle that resolution of the promise appropriately.
So, simple ways of hand adding animations to your application.
With this quick understanding of adding animations to your application,
let's proceed ahead to the exercise where we will apply animations,
both using the Animatable API, and then also the react-native-animatable.
[MUSIC]
