react-native-reanimated 动画库单张图片-loading动画实现

import React from 'react';
import { StyleSheet, View } from 'react-native';

import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import { zoom } from '~common/mx-ui/autoresizing/Autosizing';

const duration = 1500;
const easing = Easing.bezier(0, 0, 0, 0);

interface Props {
  // 正常0  build 1
  loadingType?: number;
}

// 智能文案选择生成动画
const LoadingView: React.FC<Props> = props => {
  const sv = useSharedValue<number>(0);

  React.useEffect(() => {
    sv.value = withRepeat(withTiming(1, { duration, easing }), -1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${sv.value * 360}deg` }],
  }));

  return (
    <View style={styles.warrper}>
      <Animated.Image
        source={
          props.loadingType === 0
            ? require('~assets/images/text_ai/ic_loading_normal.png')
            : require('~assets/images/text_ai/ic_loading.png')
        }
        style={[styles.image, animatedStyle]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  warrper: {
    // alignItems: 'center',
    // justifyContent: 'center',
    // flex: 1,
  },
  image: {
    width: zoom(20),
    height: zoom(20),
  },
});

export default LoadingView;