推荐RN Flight Animation：让飞行动画在React Native中栩栩如生！

import React, { PureComponent } from 'react';
import { Animated, Easing, View, StyleSheet } from 'react-native';
 
export default class FlightAnimation extends PureComponent {
  state = {
    flight: new Animated.Value(0),
  };
 
  componentDidMount() {
    this.startAnimation();
  }
 
  startAnimation = () => {
    Animated.sequence([
      Animated.timing(this.state.flight, {
        toValue: 1,
        duration: 5000,
        easing: Easing.linear,
      }),
      Animated.timing(this.state.flight, {
        toValue: 0,
        duration: 5000,
        easing: Easing.linear,
      }),
    ]).start(() => this.startAnimation());
  };
 
  render() {
    const flightStyle = {
      transform: [
        {
          translateX: this.state.flight.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 200], // 根据实际需求调整
          }),
        },
        {
          translateY: this.state.flight.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -50], // 根据实际需求调整
          }),
        },
        {
          rotate: this.state.flight.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
          }),
        },
      ],
    };
 
    return <Animated.View style={[styles.flight, flightStyle]} />;
  }
}
 
const styles = StyleSheet.create({
  flight: {
    width: 40,
    height: 40,
    backgroundColor: 'blue',
    borderRadius: 20,
  },
});

这段代码使用React Native的Animated API创建了一个不断循环的飞行动画。它首先在componentDidMount中启动动画，然后定义了一个无限循环的动画序列，通过interpolate方法将动画值映射到不同的样式属性上，实现了飞行物在天空中的运动效果。