保持在react-native-reanimated中循环动画

import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useAnimatedRef,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const Circle = () => {
  const progress = useSharedValue(0);
  const circleRef = useAnimatedRef();

  useEffect(() => {
    // 定义动画配置
    const animationConfig = {
      duration: 1000, // 动画持续时间（毫秒）
      toValue: 1, // 动画目标值
      loop: true, // 是否循环
      resetBeforeIteration: true, // 每次循环前是否重置动画
    };

    // 设置循环动画
    progress.value = withRepeat(withTiming(1, animationConfig), -1);
  }, []);

  // 定义动画样式
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        // 通过修改scaleX和scaleY来实现缩放效果
        { scaleX: progress.value },
        { scaleY: progress.value },
      ],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View
        ref={circleRef}
        style={[styles.circle, animatedStyle]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'red',
  },
});

export default Circle;