Why use LayoutAnimtion🤔️

In our common development, the demand for ordinary, often need to do some simple displacement, fades, animation, and for this kind of frequent animation, using Animated to do, although is also a good choice, but the Animated in the process of use, need more amount of code, from defining variables, start the animation, the end, And so on the process has to be manually controlled. How to add animation to App efficiently and quickly is also a relatively wide demand. That’s why we used LayoutAnimation. It’s fast and efficient, with less control over animations than Animated, but also much more efficient than Animated.

What’s the difference between Animated and 👀

Having said the advantages of LayoutAnimation over Animated, let’s compare the differences between Animated and Animated in more detail. First, Animated(the code is taken from the official documentation with some modifications)

// Part 1: define fadeAnim variable state = {fadeAnim: new Animated.Value(0)} Animate componentDidMount() {Animated. Timing (this.state.fadeanim, {toValue: 1, duration: 10000, } ).start(); } // Part 3: Animated render() {let {fadeAnim} = this.state; return ( <Animated.View style={{ opacity: fadeAnim, }} > {this.props.children} </Animated.View> ); }Copy the code

The following is LayoutAnimation

State = {bottom: 0} // Part 2: state = {bottom: 0} // Let's say we use this.state. Bottom as the value of bottom in the style of a View. Yes, just add a line of code and your View will be animated! LayoutAnimation.spring(); this.setState({ bottom: 20 });Copy the code

Through the above code, we can intuitively find how convenient LayoutAnimation is. We can use this API to add animation to our App ✌️ at a very low cost

Get started quickly 🏃♀️

React Native LayoutAnimation API provides three apis that can be used directly, namely easeInEaseOut, Linear, and Spring

LayoutAnimation.easeInEaseOut()
LayoutAnimation.linear()
LayoutAnimation.spring()
Copy the code

In the same way as in the example above, just call one of the following three apis before the corresponding setState. When the UI is updated, React Native will automatically animate the UI.

Advanced – Custom animation🎈🎈

In order to customize the animation, we need to take a closer look at the APIS provided by LayoutAnimation. First, let’s look at the definition of the interface in the source code

/** * Automatically animates views to their new positions when the * next layout happens. * * A common way to use this API is to call it before calling `setState`. * * Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`: * * UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); */ const LayoutAnimation = { /** * Schedules an animation to happen on the next layout. * * @param config Specifies animation properties: * * - `duration` in milliseconds * - `create`, `AnimationConfig` for animating in new views * - `update`, `AnimationConfig` for animating views that have been updated * * @param onAnimationDidEnd Called when the animation finished. * Only supported on iOS. * @param onError Called on error. Only supported on iOS. */ configureNext, /** * Helper for creating a config for `configureNext`. */ create, Types: Object.freeze({ spring: 'spring', linear: 'linear', easeInEaseOut: 'easeInEaseOut', easeIn: 'easeIn', easeOut: 'easeOut', keyboard: 'keyboard', }), Properties: Object.freeze({ opacity: 'opacity', scaleX: 'scaleX', scaleY: 'scaleY', scaleXY: 'scaleXY', }), checkConfig(... args: Array<mixed>) { console.error('LayoutAnimation.checkConfig(...) has been disabled.'); }, Presets, easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): ( onAnimationDidEnd? : any, ) => void), linear: (configureNext.bind(null, Presets.linear): ( onAnimationDidEnd? : any, ) => void), spring: (configureNext.bind(null, Presets.spring): ( onAnimationDidEnd? : any, ) => void), };Copy the code

Main methods 🥩

  • configureNext
  • create

The main method is configureNext, and create is just a method to help create the configuration

Using configureNext

LayoutAnimation. ConfigureNext (config: LayoutAnimationConfig, / / configuration onAnimationDidEnd provide an animation? : Function, // end of animation callback, can be null)Copy the code

As you can see from the configureNext interface definition, it is very simple to provide a LayoutAnimationConfig. What is this LayoutAnimationConfig

type LayoutAnimationConfig = $ReadOnly<{| duration: number, create? : AnimationConfig, update? : AnimationConfig, delete? : AnimationConfig, |}>;Copy the code

Once again, the config is an object, and we can quickly generate it using the create method mentioned earlier. Here is a complete example

LayouteAnimation. ConfigureNext (LayoutAnimation. Create (/ 200 / animation, / / the type of animation, such as linear, spring, EaseIn LayouteAnimation. Types. Linear, / / animation where the effect, scaleX is effective in X axis LayouteAnimation. Properties. ScaleX))Copy the code

At this point, we are fully customizable to LayoutAnimation. More configuration options can be found in the source code!