React Native：根据条件实现多视图尺寸动画效果求助

问题分析 #

你之前的代码存在两个核心问题：

• 动画仅在组件挂载时执行一次，没有监听biggerCircleIndex的变化，导致切换索引时不会触发新的动画
• 使用两个独立的Animated.Value会让所有未选中的圆同步缩小、选中的圆同步放大，无法单独控制每个圆的动画状态

解决方案 #

给每个圆形单独维护一个动画值，当选中索引变化时，分别触发对应圆形的放大/缩小动画，同时通过插值保证圆角始终是尺寸的一半，避免圆形变形：

import React, { useState, useRef, useEffect } from 'react';
import { View, Animated } from 'react-native';

const Circles = props => {
  const myCircles = [0, 1, 2, 3, 4, 5];
  const [biggerCircleIndex, setBiggerCircleIndex] = useState(2);
  
  // 为每个圆形初始化尺寸动画值，默认选中的圆为100，其他为50
  const circleSizes = useRef(
    myCircles.map(index => 
      new Animated.Value(index === biggerCircleIndex ? 100 : 50)
    )
  ).current;

  // 监听选中索引变化，触发对应圆形的动画
  useEffect(() => {
    myCircles.forEach((index) => {
      // 确定当前圆形的目标尺寸
      const targetSize = index === biggerCircleIndex ? 100 : 50;
      Animated.timing(circleSizes[index], {
        toValue: targetSize,
        duration: 500,
        useNativeDriver: false,
      }).start();
    });
  }, [biggerCircleIndex]);

  return (
    <View style={{ flexDirection: 'row', gap: 10, padding: 20 }}>
      {myCircles.map((index) => {
        // 插值计算圆角，始终保持为尺寸的一半
        const borderRadius = circleSizes[index].interpolate({
          inputRange: [50, 100],
          outputRange: [25, 50],
        });
        
        return (
          <Animated.View
            key={index}
            style={[
              { backgroundColor: 'red' },
              {
                width: circleSizes[index],
                height: circleSizes[index],
                borderRadius,
              },
            ]}
            // 添加点击事件用于测试切换选中状态
            onPress={() => setBiggerCircleIndex(index)}
          />
        );
      })}
    </View>
  );
};

export { Circles };

关键说明 #

• circleSizes数组存储每个圆形的尺寸动画状态，确保每个圆可以独立执行动画
• 监听biggerCircleIndex的变化，每次切换时遍历所有圆形，分别设置目标尺寸并启动动画
• 通过插值计算圆角，保证圆形在缩放过程中始终保持正圆形态
• 内置了点击事件，点击任意圆形即可切换选中状态，直接测试动画效果

内容的提问来源于stack exchange，提问作者Andras Karpati