如何在React Native中使用scaleY实现“永久”动画效果？

这是个很典型的布局误区——transform系列属性（包括scaleY）本质是视觉层面的变换，它只会改变元素的显示形态，不会修改元素在布局流中占据的空间大小。所以哪怕你把scaleY设为0，元素原来的占位空间依然存在，下方的自然流元素当然不会上移补位。

给你几个可行的解决思路：

1. 结合height动画同步收缩布局空间 #

既然scaleY管视觉，那我们再加一个height动画来管布局空间，两者同步执行就能实现“视觉消失+空间收缩”的效果：

// 初始化state时同时定义scale和height状态
state = {
  cardScale: new Animated.Value(1),
  cardHeight: new Animated.Value(200), // 替换成你盒子的实际初始高度
};

// 触发动画的函数
startDisappearAnimation = () => {
  Animated.parallel([
    // scaleY动画（可以用native driver提升性能）
    Animated.timing(this.state.cardScale, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }),
    // height动画（注意：height不能用native driver）
    Animated.timing(this.state.cardHeight, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false,
    }),
  ]).start();
};

// 渲染时的样式
<Animated.View 
  style={{
    transform: [{ scaleY: this.state.cardScale }],
    height: this.state.cardHeight,
    overflow: 'hidden', // 防止盒子内容在高度收缩时溢出
  }}
>
  {/* 你的盒子内容 */}
</Animated.View>

如果你的盒子高度是自适应的（不是固定值），可以通过onLayout事件先获取元素的实际高度：

<Animated.View
  onLayout={(e) => {
    this.setState({ initialHeight: e.nativeEvent.layout.height });
    // 同时把cardHeight初始值设为这个高度
    this.state.cardHeight.setValue(e.nativeEvent.layout.height);
  }}
  // ...其他样式
>

2. 用opacity+height替代scaleY（更简洁） #

如果不需要“垂直缩放”的视觉效果，直接用opacity控制可见性，配合height收缩空间会更简单：

state = {
  cardOpacity: new Animated.Value(1),
  cardHeight: new Animated.Value(200),
};

startDisappearAnimation = () => {
  Animated.parallel([
    Animated.timing(this.state.cardOpacity, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }),
    Animated.timing(this.state.cardHeight, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false,
    }),
  ]).start();
};

<Animated.View 
  style={{
    opacity: this.state.cardOpacity,
    height: this.state.cardHeight,
    overflow: 'hidden',
  }}
>
  {/* 内容 */}
</Animated.View>

3. 动画结束后动态移除元素 #

如果动画完成后这个盒子再也不需要显示了，可以在动画结束的回调里修改state，让元素从DOM树中移除，彻底消除占位：

startDisappearAnimation = () => {
  Animated.timing(this.state.cardScale, {
    toValue: 0,
    duration: 300,
    useNativeDriver: true,
  }).start(() => {
    // 动画结束后设置showCard为false
    this.setState({ showCard: false });
  });
};

// 渲染时判断是否显示
{this.state.showCard && (
  <Animated.View style={{transform: [{ scaleY: this.state.cardScale}]}}>
    {/* 内容 */}
  </Animated.View>
)}

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