This is the 26th day of my participation in the August Text Challenge.More challenges in August

preface

“The colors of August are made of gold, bright and precious; The colors of August are brewed with the sun, fragrant and brilliant.”

In the future, I wish you to adjust yourself to the best state, slowly work hard, slowly become better

React Native in the daily development process, we usually add some animations to improve the user experience. React Native also provides Animated libraries for Animated effects during development.

What is Animated

The Animated library is designed to make animations smooth, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs and configurable transformations between the two, as well as simple start/stop methods to control time-based animation execution, directly through chain calls.

The most basic workflow for creating an animation is to create an Animated.Value, attach it to one or more style properties of the animation component, and then animate the changes to the data using Animated.

Note how it is used:

In the function is component, use the useRef Hook to return a modifiable ref reference. The current property of the REF object is given the given animation value when initialized and is saved without destruction for the life of the component.

In the class component, use a state variable or a member variable to hold it in the class component. Do not modify the animation value directly

AnimatedThe value of the type

  • Animated.Value()Used of a single value
  • Animated.ValueXY()Used of vector values.

Animated.Value() can be used as a Value for styles or other attributes, and can be used for any number of attributes.

const opacityVal = useRef(new Animated.Value(0)).current; . return( <Animated.View style={[ { opacity: opacityVal // Bind opacity to animated value } ]} > <Text>opacity</Text> </Animated.View> )Copy the code

Animation configuration

Animated provides three specific function curves that control how Animated values change over time:

  • Animated.decay()It starts at a specified initial speed and then slows down until it stops.
  • Animated.spring()A basic spring physical model is provided.
  • Animated.timing()useeasingThe function moves the value with time.

Enable animation

Start the animation with a chain call to Start () on Animated, and start() can pass in a callback function to be notified when the animation is complete. If the animation works properly, the completion callback receives the value {finished: true}. If the animation ends because stop() was called (for example, because it was interrupted by a gesture or other animation), it receives {finished: false}.

const onClick = () => {
    // Will change opacityVal value to 1 in 5 seconds
    Animated.timing(opacityVal, {
      toValue: 1,
      duration: 5000
    }).start();
  };

Copy the code

conclusion

Today’s article is a brief review of the essentials and basic usage of Animated. Continue using Animated tomorrow for a slide-and-delete feature on mobile.

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.