import React, { useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
import { Icon } from '@ant-design/react-native'

const RotatingIcon = () => {
  const spinAnim = useRef(new Animated.Value(0)).current; // 创建一个新的 Animated.Value 实例

  useEffect(() => {
    Animated.loop(
      Animated.timing(spinAnim, {
        toValue: 1,
        duration: 800,
        useNativeDriver: true, // 这是推荐的做法
      })
    ).start();
  }, [spinAnim]);

  const spin = spinAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
      <Animated.View style={{ transform: [{ rotate: spin }] }}>
        <Icon name="loading-3-quarters" size={24} color="#999999" />
      </Animated.View>
    </View>
  );
};

export default RotatingIcon;