React Native中如何同时实现两个元素的放大与缩小动画？

问题背景 #

开发周计划组件，需求是用户选中某一日期时，该日期UI呈现放大效果（示例如下）。由于React Native的Animated类无法对flex属性执行动画，改用width和height属性实现，但参考代码实现后动画卡顿严重。

当前尝试代码 #

selectDay = (i: number) => {
  const {selected, grow, shrink} = this.state;

  this.setState({selected: i, latestSelected: selected});
  grow.setValue(0.5);
  shrink.setValue(1);

  Animated.parallel(
    [
      Animated.timing(grow, {
        toValue: 1,
        duration: 200,
        useNativeDriver: false,
        easing: Easing.cubic,
      }),
      Animated.timing(shrink, {
        toValue: 0.5,
        duration: 200,
        useNativeDriver: false,
        easing: Easing.cubic,
      }),
    ],
    {stopTogether: false},
  ).start();
};

// 渲染部分
const growInterpolate = grow.interpolate({
  inputRange: [0, 1],
  outputRange: ['0%', '25%'],
});

const shrinkInterpolate = shrink.interpolate({
  inputRange: [0, 1],
  outputRange: ['0%', '25%'],
});

优化方案 #

1. 改用transform: scale实现（推荐） #

放弃width/height动画，改用transform的scale属性——这是React Native中性能最优的缩放实现方式，支持native driver，动画在UI线程执行，不会触发布局重排：

// 组件初始化时创建Animated.Value
state = {
  selectedIdx: -1,
  selectedScale: new Animated.Value(1),
};

selectDay = (i: number) => {
  this.setState({selectedIdx: i});
  // 用spring动画更自然，也可以用timing
  Animated.spring(this.state.selectedScale, {
    toValue: 1.25, // 放大至原尺寸的1.25倍
    useNativeDriver: true,
    friction: 8, // 调整动画阻尼，让效果更顺滑
  }).start();
};

// 渲染时给选中的日期组件应用缩放
<View style={styles.weekContainer}>
  {days.map((day, idx) => (
    <Animated.View
      key={idx}
      style={[
        styles.dayItem,
        idx === this.state.selectedIdx && {
          transform: [{scale: this.state.selectedScale}],
        },
      ]}
      onPress={() => this.selectDay(idx)}
    >
      {/* 日期内容，比如数字、星期几 */}
      <Text>{day.num}</Text>
      <Text>{day.week}</Text>
    </Animated.View>
  ))}
</View>

2. 若坚持用width/height优化 #

如果必须通过width/height实现，做以下调整：

• 避免使用百分比插值：改用具体数值，减少JS线程的计算量
• 简化动画逻辑：去掉不必要的状态同步和并行动画的复杂配置
• 固定组件尺寸：给日期组件设置固定的初始width/height，避免动态计算

示例代码：

// 组件挂载时初始化Animated.Value
componentDidMount() {
  this.growAnim = new Animated.Value(0);
}

selectDay = (i: number) => {
  this.setState({selectedIdx: i});
  // 重置动画初始值
  this.growAnim.setValue(0);
  Animated.timing(this.growAnim, {
    toValue: 1,
    duration: 200,
    useNativeDriver: false,
    easing: Easing.cubic,
  }).start();
};

// 插值用具体数值
const widthInterpolate = this.growAnim.interpolate({
  inputRange: [0, 1],
  outputRange: [60, 75], // 假设初始宽度60，放大到75
});
const heightInterpolate = this.growAnim.interpolate({
  inputRange: [0, 1],
  outputRange: [60, 75],
});

// 渲染时应用
<Animated.View
  style={[
    styles.dayItem,
    idx === this.state.selectedIdx && {
      width: widthInterpolate,
      height: heightInterpolate,
    },
  ]}
/>

3. 减少不必要重渲染 #

把日期子组件用React.memo包裹，确保只有选中状态变化时才重新渲染：

const DayItem = React.memo(({day, isSelected, onPress}) => (
  <Animated.View
    style={[styles.dayItem, isSelected && {transform: [{scale: 1.25}]}]}
    onPress={onPress}
  >
    <Text>{day.num}</Text>
    <Text>{day.week}</Text>
  </Animated.View>
));

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