Animation
When we
animate a component on the screen we'll for the most part update its size,
position, shading, or other style characteristics continuously after some time.
We regularly use animations to impersonate development in reality, or to
manufacture interactivity similar to recognizable physical items.React Native
offers two main animation APIs: Animated and LayoutAnimation. To achieve
animations that look smooth, we’ll want our UI to render at 60
frames-per-second (fps). In other words, we need to render 1 frame roughly
every 16 milliseconds(1000 milliseconds / 60 frames).
If we perform expensive computations that take longer than 16 milliseconds
within a single frame, our animations may start to look choppy and
uneven. Accordingly, we should continually focus on execution when working with
animation.
Performance issues will in general fall into a couple of explicit categories:
1.Calculating new layouts during animation: When we change a style attribute that influences the size or position of a part, React Native as a rule re-figures the whole format of the UI. This calculation occurs on a native thread, but is still an expensive calculation that can result in choppy animations.
2.Re-rendering components: When a component's state or props change, React must decide how to accommodate these progressions and update the UI to reflect them. React is fairly efficient by default, so components generally render quickly enough that we don’t optimize their performance. With animation,however, a large component that takes a few milliseconds to render may lead to choppy animations.
3.Communicating between native code and JavaScript: Since JavaScript runs asynchronously, JavaScript code won't begin executing because of a gesture until the frame after the signal occurs on the local side.If React Native must pass values back and forth between the native thread and the JavaScript engine, this can lead to slow animations.
Layout Animation :
Layout Animation automatically animates the whole UI of our application from its current layout to the next layout. Elements that change position or size will be translated or scaled. Elements that are added or removed between layouts will be animated too, and we can choose what this animation looks like.We call LayoutAnimation.create to define an animation configuration, and then:LayoutAnimation.configureNext to enqueue the animation to run the next time render is called.The LayoutAnimation.create API takes three parameters:
1. duration- The duration of the animation
2.easing- The curve of the animation. We choose from a predefined set of curves:spring,linear, easeInEaseOut, easeIn, easeOut, keyboard.
3. creationProp- The style to animate when a new element is added:opacity or scaleXY
The main advantages of LayoutAnimation are:- We can animate our entire UI with a single function call, rather than starting one or several animations for each individual component.
- We can animate flexbox layout attributes like justifyContent and alignItems, so we don’t have to specify movement in terms of coordinates.
- The API fits nicely with React’s declarative rendering pattern – we specify the start and end states of our UI by returning components from render as we normally would, and LayoutAnimation figures out the details of how to transition between these states.
- We have limited control over individual animations and individual compo-nents, since every updated layout property of every component animates simultaneously.
- We can only animate layout attributes, so if we want to animate other style attributes like color or opacity we’ll need to use Animated.
