React native Awesome layoutanimation (layout animation)

This article was translated from :https://medium.com/@Jpoliachik/ React-native-s-layoutanimation-is-awesome-4a4d317afd3e#.6syi2v6yh

       the newly createdReact NativeTechnology Exchange Group( 282693535),welcome you, Daniel ., React NativeTechnology enthusiasts join the Exchange!Meanwhile blog Right welcome scan follow subscription number,Mobile Technology Dry,exciting article Technology push! 

If you are using React Native development, but has not yet tried to use layout Animation words, then you are too out . ~

      as aIOSdevelopers suddenly usereactnativefor development, I was very worried about losingIOSincoreanimationmany features and ease of use. The animation of UIView is very good. In ReactNative, we only need to set the desired view(View)property, and thenReact Nativethe Animated (specific click to enter) APIwill achieve a similar animation effect in native development. But we need to set a state property for each desired animation. For complex views, setting this whole code can quickly get messy.~

Open layoutanimation ( Click to enter ) the document , Don't be surprised by the short document, but it's really easy to use.

        : allow view re-render and let layout animation ( change )

Here's An example : In this example, I have a complex view of three possible states. The following are different heights, widths, and the number of item views, respectively, based on the selected ' index ' index of the three buttons . The following state effect changes the code without any animations. The specific implementation of the effect runs as follows :

We found that there is no animation effect, and now we have to add layoutanimation to achieve state changes when the view animation effect, the following line of code is very necessary .

Layoutanimation.configurenext (LayoutAnimation.Presets.spring);

The code sets the spring [ note ]. sprin g

after the above code is set, it will be used for any layout changes ' Spring ' the animation type to render rendering. The specific results are as follows :

After seeing this effect, do people feel very sexy?

The "note"layout animation only works for layout creation and update events, but deleting events is not supported. Look at the effect above, when the small yellow circle is deleted without any animation.

LayoutAnimation has the following three types of animation effects :

2. linear
3. spring

you can set different animation types to look at the effect, or you can view the source code to learn ( Source code Click to enter )

        working features :layoutanimation The operating principle calculates the desired position of the animation through the specified view, and the bottom layer is : back groundcolor and Transformations

Note: The Android source code is not analyzed here, so this may be different for Android platforms.

LayoutAnimation in the React Native is absolutely good to achieve the animation effect, Complete can be compared with the original experience, it is worth a try. This article example to complete the code , please click to view

today we mainly translate a foreign article about the layoutanimation introduction of react native. We have a problem, you can add a group react native technology Exchange Group (282693535) or a reply below.

respect translation, reprint please specify: From Sky, Clear ( HTTP://BLOG.CSDN.NET/DEVELOPER_JIANGQQ ) infringement must investigate!

Follow my subscription number (codedev123), Share mobile development Technology (ANDROID/IOS), project management, and blog posts every day! (Welcome attention, the first time to push the wonderful article)

Follow my Weibo to get more content

React native Awesome layoutanimation (layout animation)